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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-element-header-must-not-appear-as-a-descendant-of-the-footer-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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>`

```html
<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>`

```html
<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>`:

```html
<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>`:

```html
<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>`:

```html
<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>`:

```html
<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.
