HTML <footer> Tag Tutorial - Usage, Syntax,
Attributes and Example

calender-iconPublished: 29 May 2025

clock-icon5-min read





INTRODUCTION

The <footer> element is used to create footer for its nearest ancestor element or root element.

This element is generally contains information about the author of the article, copyright data, Contact info, Social media links, Navigation links, Developer credits or links to related documents.

The <footer> element is not considered sectioning content, so it does not create a new section in the document outline.

Example:

<main>
  <h1>Main Content</h1>
  <p>This is the main content area of the page.</p>
</main>
                        
<footer>
  <p>© 2025 My Website. All rights reserved.</p>
</footer>
Output:

Main Content

This is the main content area of the page.

© 2025 My Website. All rights reserved.





Usage Guidelines

  • The <footer> element must not be a descendant of an <address>, <header> or another <footer> element.
  • The <footer> element cannot contain <header> or another <footer> element.
  • When information about the author is given through <address> element then it can be included into the <footer> element.


Tag Omission

The HTML <footer> element must have both start tag and end tag.



ATTRIBUTES

The <footer> element only has global attributes.

Frequently Asked Questions(FAQ)

What is the purpose of the <footer> element in HTML?
The <footer> element is used to create footer for its nearest ancestor element or root element.

Can multiple <footer> tags be used in a single HTML document?
Yes, you can use multiple footer elements within a single HTML document. Each footer tag should be associated with its nearest sectioning content or sectioning root element.

What content can be included inside a <footer> tag?
Common content includes:
  • Authorship information
  • Copyright details
  • Contact information
  • Sitemap links
  • Back-to-top links
  • Related documents

Can navigation links be placed inside a <footer> tag?
Yes, it's common to include secondary navigation links, such as privacy policies or terms of service, within a <footer>.

Does the HTML <footer> tag have any default styling?
By default, browsers render the <footer> as a block-level element with no additional styling. It's recommended to apply your own styles to match your website's design.

Can a <footer> contain other semantic elements like section or article?
Yes, the <footer> can contain other semantic elements. For instance, you might have multiple section elements within a footer to organize content.