HTML footer Tag
HTML footer Tag
The <footer> tag is used to define the footer of the document. or in simpler words we can say to create the footer of a webpage/website.
- The
<footer>tag is new in HTML5. The<footer>tag can be used to hold various information like links and copyright data related to the webpage or a section of the webpage. - The
<footer>tag is used inside the<body>tag. The<footer>tag requires both the start(opening) tag as well as the end(closing) tag. - The
<footer>tag is not sectioning content and therefore doesn't introduce a new section. - The
<footer>tag is a structural element that is used to identify the footer of a page, document, article, or section. - Also, this is a block-level element.
<footer> tag typically contains:
- authorship information,
- copyright information,
- contact information,
- sitemap,
- back to top links etc.
The <footer> tag requires the start(opening) tag and end(closing) tag.
<footer>
..content here
</footer>Below we have a basic example for clear understanding of <footer> tag:
<!DOCTYPE html>
<html>
<head>
<title>Footer Tag Basic Example</title>
<style>
.column {
float: left;
width: 27%;
height: 300px;
}
p {
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<footer>
<div class="column">
<p>Company</p>
<ul style="list-style-type:disc">
<li>About Us</li>
<li>Careers</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</div>
<div class="column">
<p>Learn</p>
<ul>
<li>Algorithms</li>
<li>Data Structures</li>
<li>Languages</li>
<li>CS Subjects</li>
<li>Video Tutorials</li>
</ul>
</div>
<div class="column">
<p>Practice</p>
<ul>
<li>Company-wise</li>
<li>Topic-wise</li>
<li>Contests</li>
<li>Subjective Questions</li>
</ul>
</div>
</footer>
</body>
</html>Another Example:
In this example we will add a few links to the footer, which is usually the case with most of the websites.
<!DOCTYPE html>
<html>
<head>
<title>HTML footer Tag</title>
<style>
a {
font-size:25px;
text-decoration:none;
}
p {
font-size:25px;
}
</style>
</head>
<body>
<footer>
<p>
<a href= "https://www.studytonight.com/about/">About Us</a> |
<a href= "https://www.studytonight.com/contact/">Contact</a>
</p>
<p>© Studytonight. Rights Reserved.</p>
</footer>
</body>
</html>This element does not have any specific attributes although this element supports Global attributes and Event attributes.
footer {
display: block;
}Following browsers support this attribute:
- Firefox 4+
- Google Chrome 6+
- Internet Explorer 9+
- Apple Safari 5.1+
- Opera 11.1+










