About This HTML Issue
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.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.
Learn more: