<footer></footer> tag is an essential part of HTML5 that plays a crucial role in structuring web content. This guide will walk you through its purpose, usage, and best practices.
What is the HTML Footer Tag?
<footer></footer> tag represents a footer for its nearest sectioning content or sectioning root element. It typically contains information about the author(s), copyright information, contact details, sitemap, back to top links, related documents, and other such end-of-document or end-of-section data.
How to Use the HTML Footer Tag?
To use the
<footer></footer> tag in your HTML document, simply wrap it around the content you want to appear in your page’s footer. Here’s a basic example:
<footer> <p>Copyright © 2023 My Website</p> </footer>
This code will display “Copyright © 2023 My Website” at the bottom of your webpage.
Nesting within Other Elements
You can also nest footers within other elements like sections and articles. For instance:
<article> <h2>My Article Title</h2> <p>Article content...</p> <footer> <p>Published on January 1st, 2023.</p> </footer> </article>
In this example, the footer provides information about the article within which it is nested.
Best Practices for Using HTML Footer Tag
- Don’t overuse: While you can have more than one footer in a page (nested within different elements), avoid using too many as it can confuse your users and search engines.
- Semantic usage: Use the footer tag to contain information about its containing element. For instance, a footer within an article should contain information about that article.
- No sectioning content: The HTML5 specification advises against including sectioning content (like <nav>, <article>, <aside>) inside a <footer>. Stick to paragraphs, lists, and other non-sectioning content instead.
<footer></footer> tag is a powerful tool for structuring your webpages and making them more accessible. By understanding how to use it correctly, you can create better-structured, more user-friendly websites.