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

Acerca de este problema HTML

El elemento <main> cumple un papel estructural específico: identifica el contenido principal de la página, distinto de elementos repetidos como encabezados, pies de página y navegación. Debido a este propósito único, la especificación HTML limita estrictamente dónde puede aparecer <main> en el árbol del documento. Anidar <main> dentro de un elemento <section> viola estas reglas porque <section> representa una agrupación temática de contenido — colocar <main> dentro de él implica que el contenido dominante de la página es meramente una subsección de algo más, lo cual es semánticamente contradictorio.

Según el estándar HTML living del WHATWG, un elemento <main> jerárquicamente correcto es aquel cuyos elementos ancestros se limitan a <html>, <body>, <div>, <form> (sin nombre accesible) y elementos personalizados autónomos. Esto significa que <main> no puede ser descendiente de <article>, <aside>, <footer>, <header>, <nav> o <section>.

Por qué esto importa

Accesibilidad: Los lectores de pantalla y tecnologías asistivas utilizan el elemento <main> como punto de referencia para permitir a los usuarios saltar directamente al contenido principal. Cuando <main> está incorrectamente anidado dentro de <section>, las tecnologías asistivas pueden malinterpretar la estructura del documento, dificultando la navegación para usuarios que dependen de puntos de referencia.
Cumplimiento de estándares: Los navegadores son permisivos y renderizarán la página independientemente, pero el significado semántico se rompe. Futuras características del navegador o herramientas que dependan de la estructura correcta del documento pueden no funcionar como se espera.
Claridad de la estructura del documento: El elemento <main> debe ubicarse claramente en el nivel superior de tu jerarquía de contenido, haciendo inmediatamente obvio tanto para desarrolladores como para máquinas qué parte de la página es el contenido principal.

Reglas adicionales para `<main>`

Más allá de la restricción de ancestros, recuerda que un documento no debe tener más de un elemento <main> visible. Si usas múltiples elementos <main> (por ejemplo, en una aplicación de página única), todos excepto uno deben tener especificado el atributo hidden.

Ejemplos

Incorrecto: `<main>` anidado dentro de `<section>`

Esta estructura coloca <main> como descendiente de <section>, lo que desencadena el error de validación:

<body>
  <header>
    <h1>Mi sitio web</h1>
  </header>
  <section>
    <main>
      <h2>Bienvenido</h2>
      <p>Este es el contenido principal de la página.</p>
    </main>
  </section>
</body>

Correcto: `<main>` como hermano de `<section>`

Mueve <main> fuera del <section> para que sea un hijo directo de <body>:

<body>
  <header>
    <h1>Mi sitio web</h1>
  </header>
  <main>
    <h2>Bienvenido</h2>
    <p>Este es el contenido principal de la página.</p>
  </main>
  <section>
    <h2>Temas relacionados</h2>
    <p>Contenido temático adicional va aquí.</p>
  </section>
</body>

Correcto: elementos `<section>` dentro de `<main>`

Si tu contenido principal está dividido en secciones temáticas, anida los elementos <section> dentro de <main> — no al revés:

<body>
  <header>
    <h1>Mi sitio web</h1>
  </header>
  <main>
    <section>
      <h2>Introducción</h2>
      <p>Una visión general del tema.</p>
    </section>
    <section>
      <h2>Detalles</h2>
      <p>Una inmersión más profunda en el tema.</p>
    </section>
  </main>
  <footer>
    <p>© 2024 Mi sitio web</p>
  </footer>
</body>

Correcto: `<main>` envuelto en un `<div>`

Si tu maquetación requiere un elemento envolvente alrededor de <main>, un <div> es un ancestro válido:

<body>
  <div class="layout-wrapper">
    <header>
      <h1>Mi sitio web</h1>
    </header>
    <main>
      <h2>Bienvenido</h2>
      <p>Este es el contenido principal de la página.</p>
    </main>
  </div>
</body>

El principio clave es simple: <main> define el contenido dominante de todo el documento, por lo que pertenece al nivel superior de tu jerarquía de contenido. Los elementos de sección como <section>, <article>, <aside>, <nav>, <header> y <footer> nunca deben envolver <main> — en su lugar, deben colocarse como hijos o hermanos de él.