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

Sobre este problema HTML

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