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

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

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

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

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

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

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

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