The element “footer” must not appear as a descendant of the “header” element.

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

1. Move the <footer> outside the <header> — Place it as a sibling element after the <header> closes.
2. 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.
3. 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>&copy; 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>&copy; 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.

Learn more:

WHATWG Spec

HTML Spec: header

→

WHATWG Spec

HTML Spec: footer

→