HTML Guides for footer
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
The HTML specification maps certain elements to implicit ARIA roles. The <footer> element, when used as a direct child of <body> (i.e., not nested inside an <article>, <aside>, <main>, <nav>, or <section> element), automatically carries the contentinfo landmark role. This means screen readers and other assistive technologies already announce it as a content information landmark without any extra markup.
Adding role="contentinfo" to a <footer> element is redundant because:
- It duplicates built-in semantics. Browsers already expose the correct role to the accessibility tree. Repeating it adds no benefit and clutters your markup.
- It can cause confusion for developers. Seeing an explicit role might suggest the element doesn’t have one by default, leading to misunderstandings about how HTML semantics work.
- It violates the first rule of ARIA use. The W3C’s “Using ARIA” guide states: “If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.”
It’s worth noting that when a <footer> is nested inside a sectioning element like <article> or <section>, it does not carry the contentinfo role — it maps to a generic role instead. In that context, adding role="contentinfo" would actually change the element’s semantics rather than being redundant, though doing so is generally not appropriate since each page should have only one contentinfo landmark.
If you are working with a <div> that serves as a footer (perhaps in legacy code), the best approach is to replace it with a semantic <footer> element rather than applying role="contentinfo" to the <div>.
Examples
❌ Redundant role on <footer>
This triggers the validator warning because the role is already implicit:
<footer role="contentinfo">
<p>© 2024 Example Corp. All rights reserved.</p>
</footer>✅ Fixed: <footer> without redundant role
Simply remove the role="contentinfo" attribute:
<footer>
<p>© 2024 Example Corp. All rights reserved.</p>
</footer>✅ Using a <div> as a footer (legacy pattern)
If you cannot use a <footer> element for some reason, applying role="contentinfo" to a <div> is valid and meaningful since the <div> has no implicit role:
<div role="contentinfo">
<p>© 2024 Example Corp. All rights reserved.</p>
</div>However, replacing the <div> with a <footer> is always the preferred approach.
✅ Nested footer inside a section
When <footer> appears inside a sectioning element, it does not carry the contentinfo role. No explicit role is needed here either — it simply represents footer content for that section:
<article>
<h2>Blog Post Title</h2>
<p>Article content here.</p>
<footer>
<p>Published on January 1, 2024</p>
</footer>
</article>The <footer> element represents a footer for its nearest ancestor sectioning content (such as <article>, <section>, <nav>, or <aside>) or sectioning root element (such as <body>, <blockquote>, or <details>). It typically contains information about its section, such as authorship, copyright data, links to related documents, or contact information.
According to the WHATWG HTML Living Standard, the content model for <footer> is “flow content, but with no <header>, <footer>, or <main> element descendants.” This means a <footer> must not appear anywhere inside another <footer>, regardless of how deeply nested it is. Even if there are other elements in between, the restriction still applies.
Why This Is a Problem
Standards compliance: Nesting <footer> elements violates the HTML specification and produces a validation error. This signals a structural issue in your document.
Semantic ambiguity: A <footer> is meant to describe metadata for its nearest sectioning ancestor. When one <footer> is nested inside another, it becomes unclear which section each footer is associated with. This undermines the semantic meaning of the element.
Accessibility: Screen readers and assistive technologies rely on the semantic structure of HTML to convey page organization to users. A nested <footer> can confuse these tools, potentially causing them to misrepresent or skip content, degrading the experience for users who depend on them.
Browser inconsistencies: While browsers are generally forgiving of invalid markup, they may handle nested <footer> elements differently, leading to unpredictable rendering or behavior.
How to Fix It
The most common fix depends on why the nesting occurred in the first place:
- If the inner <footer> is purely for styling purposes, replace it with a <div> and use a CSS class instead.
- If the inner <footer> belongs to a nested section, make sure it’s inside its own <article> or <section> element — not directly inside the outer <footer>.
- If the nesting is accidental, remove the inner <footer> entirely.
Examples
❌ Incorrect: Nested <footer> elements
<footer>
<p>© 2024 Example Corp.</p>
<footer>
<p>Built with love by the web team.</p>
</footer>
</footer>This is invalid because a <footer> appears as a descendant of another <footer>.
✅ Fixed: Replace inner <footer> with a <div>
<footer>
<p>© 2024 Example Corp.</p>
<div class="footer-credits">
<p>Built with love by the web team.</p>
</div>
</footer>❌ Incorrect: Deeply nested <footer> inside another <footer>
The restriction applies at any depth, not just direct children:
<footer>
<div class="wrapper">
<article>
<footer>
<p>Article author info</p>
</footer>
</article>
</div>
</footer>Even though there are intermediate elements, the inner <footer> is still a descendant of the outer <footer>, which is not allowed.
✅ Fixed: Move the article outside the <footer>
<article>
<footer>
<p>Article author info</p>
</footer>
</article>
<footer>
<div class="wrapper">
<p>© 2024 Example Corp.</p>
</div>
</footer>✅ Fixed: Each <footer> belongs to its own section
It’s perfectly valid to have multiple <footer> elements on a page, as long as they aren’t nested inside each other:
<article>
<h2>Blog Post Title</h2>
<p>Post content goes here.</p>
<footer>
<p>Written by Jane Doe on January 1, 2024</p>
</footer>
</article>
<footer>
<p>© 2024 Example Corp. All rights reserved.</p>
</footer>Each <footer> here is associated with its nearest sectioning ancestor — the first with the <article>, the second with the <body> — and neither is nested inside the other.
The <header> element represents introductory content for its nearest ancestor sectioning content or sectioning root element. It typically contains headings, logos, navigation, and search forms. The <footer> element represents a footer for its nearest ancestor sectioning content or sectioning root element, typically containing information like authorship, copyright data, or links to related documents.
The HTML specification states that <header> must not contain <header> or <footer> descendants. This restriction exists because these elements carry specific semantic meaning. A <footer> nested inside a <header> creates a contradictory document structure — it would simultaneously represent introductory content (by being in the header) and concluding/supplementary content (by being a footer). This confuses assistive technologies like screen readers, which use these landmark elements to help users navigate the page. When a screen reader encounters a <footer> inside a <header>, it cannot accurately convey the document structure to the user.
Note that this rule applies regardless of how deeply nested the <footer> is. Even if the <footer> is inside a <div> that is inside the <header>, it still violates the specification because it is a descendant of the <header>.
How to fix it
- Move the <footer> outside the <header> — Place it as a sibling element after the <header> closes.
- Replace <footer> with a non-semantic element — If you only need a visual container within the header (not actual footer semantics), use a <div> or <p> instead.
- Use a sectioning element as a boundary — If you genuinely need footer-like content within the header area, wrap it in a sectioning element like <section> or <article>. Because <footer> applies to its nearest sectioning ancestor, placing it inside a <section> within the <header> would technically satisfy the spec — but this approach should only be used when it makes semantic sense.
Examples
❌ Incorrect: <footer> nested inside <header>
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<footer>
<p>© 2024 My Website</p>
</footer>
</header>❌ Incorrect: deeply nested <footer> still inside <header>
<header>
<h1>My Website</h1>
<div class="header-bottom">
<footer>
<p>Contact us at info@example.com</p>
</footer>
</div>
</header>✅ Correct: <footer> moved outside <header>
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<footer>
<p>© 2024 My Website</p>
</footer>✅ Correct: using a <div> for non-semantic content inside the header
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<div class="header-meta">
<p>Contact us at info@example.com</p>
</div>
</header>✅ Correct: <footer> inside a sectioning element within the header
<header>
<h1>Latest News</h1>
<article>
<h2>Featured Story</h2>
<p>A brief summary of the story...</p>
<footer>
<p>By Jane Doe, June 2024</p>
</footer>
</article>
</header>In this last example, the <footer> is a descendant of the <article> element (a sectioning content element), so it acts as the footer for the article rather than for the <header>. This is valid because the spec forbids <footer> as a descendant of <header> only when there is no intervening sectioning content element.
The <footer> element represents footer content for its nearest ancestor sectioning element or the <body>. It typically contains information like copyright notices, contact details, or links to related documents. The <header> element, on the other hand, represents introductory content or a group of navigational aids. The HTML living standard states that <header> must not appear as a descendant of <footer>, because embedding introductory content inside closing content creates a semantic contradiction.
It’s worth noting that neither <header> nor <footer> are sectioning content themselves—they are flow content with specific usage restrictions. The <footer> element’s content model explicitly excludes <header> descendants at any depth, meaning you can’t nest a <header> inside a <footer> even if there are other elements in between.
This restriction matters for several reasons:
- Semantics and accessibility: Screen readers and assistive technologies rely on the correct use of landmark elements. A <header> inside a <footer> sends conflicting signals about the purpose of that content, which can confuse users navigating by landmarks.
- Standards compliance: Violating the content model rules means your HTML is invalid, which can lead to unpredictable behavior across different browsers and parsing engines.
- Maintainability: Using elements according to their intended purpose makes your markup easier for other developers to understand and maintain.
Examples
❌ Invalid: <header> nested inside <footer>
<footer>
<header>
<h2>Contact Us</h2>
<nav>
<a href="/email">Email</a>
<a href="/phone">Phone</a>
</nav>
</header>
<p>© 2024 Example Corp.</p>
</footer>This triggers the validation error because <header> is a direct child of <footer>.
❌ Invalid: <header> deeply nested inside <footer>
<footer>
<div class="footer-top">
<header>
<h3>Quick Links</h3>
</header>
</div>
<p>© 2024 Example Corp.</p>
</footer>The restriction applies to any level of nesting, not just direct children. A <header> anywhere inside a <footer> is invalid.
✅ Valid: <header> and <footer> as siblings
If the content is truly introductory, it belongs outside the <footer>:
<header>
<h2>Contact Us</h2>
<nav>
<a href="/email">Email</a>
<a href="/phone">Phone</a>
</nav>
</header>
<footer>
<p>© 2024 Example Corp.</p>
</footer>✅ Valid: Using headings directly inside <footer>
If you need a heading inside a footer, use heading elements (<h2>, <h3>, etc.) directly without wrapping them in a <header>:
<footer>
<h2>Contact Us</h2>
<nav>
<a href="/email">Email</a>
<a href="/phone">Phone</a>
</nav>
<p>© 2024 Example Corp.</p>
</footer>✅ Valid: Using a <div> for grouping inside <footer>
If you need to group content visually within a footer, use a <div> instead of a <header>:
<footer>
<div class="footer-top">
<h3>Quick Links</h3>
<nav>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</div>
<div class="footer-bottom">
<p>© 2024 Example Corp.</p>
</div>
</footer>✅ Valid: <header> inside an <article> within a <footer>
One exception worth noting: a <header> can appear inside a <footer> if it belongs to a new sectioning element like <article> or <section> nested within that footer. In this case, the <header> is a descendant of the <article>, not semantically of the <footer>:
<footer>
<article>
<header>
<h3>Latest Blog Post</h3>
</header>
<p>A summary of the latest post.</p>
</article>
<p>© 2024 Example Corp.</p>
</footer>This is valid because the <header> serves as introductory content for the <article>, and sectioning elements reset the scope of <header> and <footer> restrictions.
Ready to validate your sites?
Start your free trial today.