In this post, we will talk about the HTML Footer Tag. Aspiring to meet the demands of learning.

In HTML, the <footer> tag represents a footer section or container for content that appears at the bottom of a web page. The <footer> tag is used to define the footer of a document or a section. It is often used to include information about the author, copyright information, contact information, and links to related documents.

A document’s footer section:


<!DOCTYPE html> <html> <body> <footer> <p>Contact us: Mr Examples</p> <p><a href="mailto:[email protected]">[email protected]</a></p> </footer> </body> </html>

The following CSS code can be used to style the footer:


<!DOCTYPE html> <html> <head> <style> footer { text-align: center;padding: 4px; background-color: grey; color:white; } </style> </head> <body> <footer> <p>Contact US: Mr Examples</p> <p><a href="mailto:[email protected]">[email protected]</a></p> </footer> </body> </html>

Here is an example of <footer> tag with <nav> tag:


<!DOCTYPE html> <html> <head> <style> footer { background-color: #f2f2f2; padding: 20px; color: #333; font-size: 14px; text-align: center; } footer a { color: #333; text-decoration: none; } </style> </head> <body> <footer> <p>Copyright Mr Examples</p> <nav> <a href="#">About</a> <a href="#">Contact</a> <a href="#">Privacy Policy</a> <a href="mailto:[email protected]">Email</a> </nav> </footer> </body> </html>

Html footer tag <footer> identifies a document or section footer.

Usually, a footer element contains the following information:

  1. Details about the author.
  2. Information about copyright.
  3. A brief description of the contact.
  4. Detailed site map.
  5. Links to the top.
  6. Documents related to this topic.
Tip: There can be multiple <footer> elements in a single document.

Important: In an footer element, you must insert the contact details in an <address> element.



In HTML, the <footer> Tag accepts Global Attributes as well.


In HTML, the <footer> Tag accepts Event Attributes as well.

Browser Compatibility

In the following table, the numbers indicate the version of the browser that is compatible with the element in the footer tag.


Predefined CSS

In many browsers, the <footer> element will appear with the following default values:

footer {
display: block;

There are several advantages to using the HTML <footer> tag:

  • By using the <footer> tag to mark up the footer section of your webpage, you are helping to improve the accessibility of your site for users who rely on screen readers or other assistive technologies. This makes it easier for users to navigate and understand the content of your website.
  • Using the <footer> tag can also help improve the SEO of your website by making it easier for search engines to understand the structure of your webpage. This can help your site rank higher in search engine results pages (SERPs).
  • By using the <footer> tag consistently throughout your website, you can help ensure that your site has a consistent look and feel, which can help improve the user experience.
  • Using the <footer> tag to mark up the footer section of your webpage can help separate it from the main content of the page, which can make it easier for users to identify and focus on the important content.
  • The <footer> tag can also be used to apply specific styles to the footer section of your webpage, which can help make it stand out and be more visually appealing to users.
If this article was informative somehow, then do share this meaningful information with your friends by clicking on the links below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *