We will explore the HTML <footer> element in this post.
HTML <footer> element is employed to specify a footer for a document or a section. Typically, it is positioned at the end of the section (bottom of the page).
The footer element was incorporated in HTML5, whereas in earlier versions, it was identified using the "id" attribute, such as: <div id = "footer">. Positioned at the bottom of the webpage, the footer typically includes standard information.
HTML <footer> tag holds various details like author information, sitemap, contact details, copyright information, back-to-top links, related documents, and more.
Note: You can have one or many footer elements in one document.
If you wish to incorporate details about the author, like their address or email, on your webpage, ensure that all pertinent elements are integrated into the footer section.
The HTML <footer> element allows for the utilization of both event and global attributes.
Examples of HTML Footer Tag
Let's explore the HTML <footer>tag in detail with the assistance of some examples.
Example 1:
We'll be utilizing the <footer> element in this illustration. Our objective is to input the author's details and email address within the <footer> tag.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Demonstration-1 of HTML Footer Tag</title>
</head>
<body>
<h1>HTML <footer> tag</h1>
<footer>
<p>Author: C# Tutorial</p>
<p>
<a href="mailto:C# Tutorial@example.com">C# Tutorial@example.com</a>
</p>
</footer>
</body>
</html>
Output:
We can observe the <footer> element in the displayed output.
Example 2:
We observed that in the first example, the footer did not appear at the bottom as it was positioned using CSS to enhance visibility. In this tutorial, we will be styling the <footer> tag.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Demonstration-2 of HTML Footer Tag</title>
<style>
.footer {
width: 100%;
position: fixed;
background-color:rgb(225, 142, 17);
color: rgb(15, 11, 11);
text-align: center;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<h1>HTML <footer> tag</h1>
<p>We can find <footer> tag at the bottom of the web page.</p>
<footer class="footer">
<p>Author: C# Tutorial</p>
<p>
<a href="mailto:C# Tutorial@example.com">C# Tutorial@example.com</a>
</p>
</footer>
</body>
</html>
Output:
We can readily observe the footer displayed at the bottom of the webpage in the provided output.
Example 3:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Demonstration-3 of HTML Footer Tag</title>
<style>
.footer {
width: 100%;
position: fixed;
background-color:rgb(162, 223, 234);
color: rgb(37, 17, 149);
text-align: left;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Picture" style="height: 60%; width: 100%;">
<div class="footer">
<h4>About us</h4>
<ul>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> About </a> </li>
<li> <a href="#"> Career </a> </li>
<li> <a href="#"> Contact us </a> </li>
<li> <a href="#"> Visit here! </a> </li>
</ul>
</div>
</body>
</html>
Output:
Example 4:
We are about to showcase the HTML footer element responsible for displaying copyright details. In this example, we will employ the <script> tag to enable a feature where a button can be created. Upon clicking this button, the footer will be revealed at the bottom of the webpage.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Demonstration-4 of the HTML Footer Tag</title>
<style>
footer {
display: none;
width: 100%;
position: fixed;
background-color:rgb(162, 223, 234);
color: rgb(37, 17, 149);
text-align: left;
bottom: 0;
left: 0;
}
</style>
<body>
<h3>You will notice copyright information in the footer.</h3>
<p>Press the button to witness copyright information in the footer section.</p>
<button onclick="toggleFooter()">Click me and see the footer</button>
<footer id="footer-tag">
All Rights Reserved @ C# Tutorial
</footer>
<script>
function toggleFooter() {
var footer = document.getElementById("footer-tag");
if (footer.style.display === "none") {
footer.style.display = "block";
} else {
footer.style.display = "none";
}
}
</script>
</body>
</html>
Here, within the output, the copyright details are displayed upon clicking the button.
Result when the button is not pressed:
Result when the button is pressed:
Example 5:
We will be creating three divisions within the HTML footer element, specifically named as the "About us" segment, the "Crucial links" segment, and the "Contact Details" segment.
Code:
Output:
We can distinctly observe the trio of sections within the footer displayed underneath.
Example 6:
Before the introduction of HTML5, the footer was specified with the "id" attribute. In this example, we will generate the footer utilizing the "id" attribute.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Demonstration-6 of HTML Footer Tag</title>
<style>
#footer {
width: 100%;
position: fixed;
background-color: rgb(154, 120, 246);
color: rgb(249, 246, 249);
text-align: center;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<h3>Creating footer using "id" attribute</h3>
<p id="footer">This is the footer of this web page.</p>
</body>
</html>
Output:
We can see the footer in the output given below.
Supporting Browsers
- Chrome Brower
- Firefox
- Opera
- Internet Explorer
- Safari
Conclusion
We have explored the HTML footer element in this post. The <footer> tag specifies the footer section of a webpage, typically displaying details such as contact information, copyright notices, and more. We have examined several instances of HTML <footer> tags to gain a comprehensive understanding of their usage.