Verificação HTML: The element “footer” must not appear as a descendant of the “footer” element.

Sobre este problema HTML

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>&copy; 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>&copy; 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>&copy; 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>&copy; 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.