The <footer> Element
As defined in the HTML Living Standard, the <footer> element represents a footer for its nearest ancestor sectioning content or sectioning root element (like <body>, <article>, or <section>).
<footer>
<p>© 2026 My Awesome Project</p>
<nav>
<a href="/contact">Contact Us</a>
</nav>
</footer>
View HTML Living Standard: The footer element
Accessibility Landmark: contentinfo
When a <footer> is a direct child of the <body>, it is programmatically identified as the contentinfo landmark.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By using the <footer> element instead of a generic <div>, you allow screen reader users to jump directly to the bottom of the page to find contact info, legal notices, or site maps. This satisfies the "programmatic determination" requirement by assigning a specific role to the container.
Usage and Hierarchy
- Multiple Footers: A page can have multiple
<footer>elements. For instance, each<article>can have its own footer containing tags, author info, or "Related Posts" links. - Prohibited Nesting: A
<footer>element cannot be a descendant of a<header>or another<footer>element. - Content: Typically contains copyright data, links to related documents, contact information (via the
<address>tag), and navigation blocks.
A11y Tip: Identifying Scoped Footers
While the main document footer is a unique landmark, footers inside articles or sections are not. If you have complex footers within sections, consider using aria-label to help assistive technologies distinguish them (e.g., <footer aria-label="Article metadata">).