Validación HTML: The “main” element must not appear as a descendant of the “main” element.

Acerca de este problema HTML

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

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

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

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

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

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

<!-- 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.