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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-element-footer-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 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](https://html.spec.whatwg.org/multipage/sections.html#the-footer-element), 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:

1. **If the inner `<footer>` is purely for styling purposes**, replace it with a `<div>` and use a CSS class instead.
2. **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>`.
3. **If the nesting is accidental**, remove the inner `<footer>` entirely.

## Examples

### ❌ Incorrect: Nested `<footer>` elements

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

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

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

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

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