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

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

The `<main>` element identifies the primary content of a page — the content that is directly related to or expands upon the central topic of the document. According to the WHATWG HTML living standard, a `<main>` element must not appear as a descendant of another `<main>` element. This rule exists because the semantic purpose of `<main>` is to mark a single, unique content region; nesting it creates a contradictory structure where one "primary content area" exists inside another.

This matters for several important reasons:

- **Accessibility:** Screen readers and other assistive technologies use the `<main>` landmark to allow users to skip directly to the primary content. When multiple or nested `<main>` elements exist, this navigation breaks down — assistive technology may only recognize one of them, or it may present a confusing hierarchy of "main" landmarks to the user.
- **Standards compliance:** Browsers and validators enforce the HTML specification's content model for `<main>`. A nested `<main>` violates that content model and produces a validation error.
- **Semantic clarity:** The `<main>` element carries specific meaning. Nesting it dilutes that meaning and signals a structural misunderstanding of the document to both machines and other developers.

This issue commonly arises when composing pages from multiple templates or components — for example, when a layout template already wraps content in `<main>` and an inner component or partial also includes its own `<main>` element. It can also happen during refactoring when code is moved between files without checking the surrounding structure.

To fix the issue, identify the nested `<main>` element and replace it with a more appropriate element. If the inner content represents a thematic grouping, use `<section>`. If it represents a self-contained composition (like a blog post or comment), use `<article>`. If no particular semantic meaning is needed, a plain `<div>` works fine.

## Examples

### ❌ Invalid: nested `<main>` elements

```html
<main>
  <h1>Welcome</h1>
  <main>
    <p>This nested main element is invalid.</p>
  </main>
</main>
```

The inner `<main>` is a descendant of the outer `<main>`, which violates the content model.

### ✅ Fixed: inner `<main>` replaced with `<section>`

```html
<main>
  <h1>Welcome</h1>
  <section>
    <h2>Introduction</h2>
    <p>This section is valid inside main.</p>
  </section>
</main>
```

### ❌ Invalid: deeply nested `<main>` inside other elements

The nesting doesn't have to be direct. A `<main>` anywhere inside another `<main>` triggers this error:

```html
<main>
  <h1>Dashboard</h1>
  <div class="content-wrapper">
    <article>
      <main>
        <p>Still invalid, even though it's nested several levels deep.</p>
      </main>
    </article>
  </div>
</main>
```

### ✅ Fixed: replaced with `<div>`

```html
<main>
  <h1>Dashboard</h1>
  <div class="content-wrapper">
    <article>
      <div>
        <p>Now valid with a neutral container element.</p>
      </div>
    </article>
  </div>
</main>
```

### ❌ Invalid: component templates each providing `<main>`

This pattern often appears in frameworks where a layout and a page component both define `<main>`:

```html
<!-- Layout template wraps page content -->
<main>
  <!-- Page component output -->
  <main>
    <h1>About Us</h1>
    <p>Our story begins...</p>
  </main>
</main>
```

### ✅ Fixed: `<main>` only in the layout

```html
<!-- Layout template wraps page content -->
<main>
  <!-- Page component output -->
  <h1>About Us</h1>
  <p>Our story begins...</p>
</main>
```

Keep `<main>` at whichever level makes the most sense for your architecture — typically the outermost layout — and remove it from inner components. If you need to group the inner content, use `<section>`, `<article>`, or `<div>` instead.