Validación HTML: El elemento "main" no debe aparecer como descendiente del elemento "main".

Acerca de este problema HTML

El elemento <main> identifica el contenido principal de una página — el contenido que está directamente relacionado con o amplía el tema central del documento. Según el estándar WHATWG HTML living standard, un elemento <main> no debe aparecer como descendiente de otro elemento <main>. Esta regla existe porque el propósito semántico de <main> es marcar una única región de contenido específica; anidarlo crea una estructura contradictoria donde un “área de contenido principal” existe dentro de otra.

Esto importa por varias razones importantes:

Accesibilidad: Los lectores de pantalla y otras tecnologías de asistencia usan el punto de referencia <main> para permitir a los usuarios saltar directamente al contenido principal. Cuando existen múltiples elementos <main> o anidados, esta navegación se rompe — la tecnología de asistencia puede reconocer solo uno de ellos, o puede presentar una jerarquía confusa de puntos de referencia “principal” al usuario.
Cumplimiento de estándares: Los navegadores y validadores hacen cumplir el modelo de contenido de la especificación HTML para <main>. Un <main> anidado viola ese modelo de contenido y produce un error de validación.
Claridad semántica: El elemento <main> lleva un significado específico. Anidarlo diluye ese significado y señala un malentendido estructural del documento tanto a las máquinas como a otros desarrolladores.

Este problema comúnmente surge al componer páginas desde múltiples plantillas o componentes — por ejemplo, cuando una plantilla de diseño ya envuelve el contenido en <main> y un componente interno o parcial también incluye su propio elemento <main>. También puede suceder durante la refactorización cuando el código se mueve entre archivos sin verificar la estructura circundante.

Para solucionar el problema, identifica el elemento <main> anidado y reemplázalo con un elemento más apropiado. Si el contenido interno representa una agrupación temática, usa <section>. Si representa una composición autocontenida (como una entrada de blog o comentario), usa <article>. Si no se necesita un significado semántico particular, un simple <div> funciona bien.

Ejemplos

❌ Inválido: elementos `<main>` anidados

<main>
  <h1>Bienvenido</h1>
  <main>
    <p>Este elemento main anidado es inválido.</p>
  </main>
</main>

El <main> interno es descendiente del <main> externo, lo cual viola el modelo de contenido.

✅ Solucionado: `<main>` interno reemplazado con `<section>`

<main>
  <h1>Bienvenido</h1>
  <section>
    <h2>Introducción</h2>
    <p>Esta sección es válida dentro de main.</p>
  </section>
</main>

❌ Inválido: `<main>` profundamente anidado dentro de otros elementos

El anidamiento no tiene que ser directo. Un <main> en cualquier lugar dentro de otro <main> desencadena este error:

<main>
  <h1>Panel de control</h1>
  <div class="content-wrapper">
    <article>
      <main>
        <p>Sigue siendo inválido, aunque esté anidado varios niveles de profundidad.</p>
      </main>
    </article>
  </div>
</main>

✅ Solucionado: reemplazado con `<div>`

<main>
  <h1>Panel de control</h1>
  <div class="content-wrapper">
    <article>
      <div>
        <p>Ahora válido con un elemento contenedor neutral.</p>
      </div>
    </article>
  </div>
</main>

❌ Inválido: plantillas de componentes cada una proporcionando `<main>`

Este patrón a menudo aparece en frameworks donde un diseño y un componente de página ambos definen <main>:

<!-- La plantilla de diseño envuelve el contenido de la página -->

<main>
<!-- Salida del componente de página -->

  <main>
    <h1>Acerca de nosotros</h1>
    <p>Nuestra historia comienza...</p>
  </main>
</main>

✅ Solucionado: `<main>` solo en el diseño

<!-- La plantilla de diseño envuelve el contenido de la página -->

<main>
<!-- Salida del componente de página -->

  <h1>Acerca de nosotros</h1>
  <p>Nuestra historia comienza...</p>
</main>

Mantén <main> en cualquier nivel que tenga más sentido para tu arquitectura — típicamente el diseño más externo — y elimínalo de los componentes internos. Si necesitas agrupar el contenido interno, usa <section>, <article>, o <div> en su lugar.