Acerca de este problema HTML
El elemento <main> cumple un propósito muy específico en HTML: identifica el contenido principal del <body> del documento — el contenido que está directamente relacionado o que amplía el tema central de la página. Debido a este rol a nivel de documento, la especificación HTML restringe dónde puede aparecer <main>. No debe ser descendiente de <article>, <aside>, <header>, <footer> o <nav>. Todos estos son elementos de sección o estructurales que representan subconjuntos de la página, y anidar <main> dentro de ellos crea una contradicción semántica — estarías diciendo “el contenido principal de toda la página vive dentro de esta sub-sección.”
El elemento <article>, por el contrario, representa una composición autocontenida — algo como una entrada de blog, una noticia, una publicación de foro o un comentario. Los artículos están destinados a ser distribuidos o reutilizados independientemente. Lógicamente viven dentro del área de contenido principal de una página, no alrededor de ella.
Esta distinción importa para la accesibilidad. Los lectores de pantalla y las tecnologías de asistencia usan el landmark <main> para permitir a los usuarios saltar directamente al contenido principal de una página. Cuando <main> está incorrectamente anidado dentro de un <article>, las tecnologías de asistencia pueden malinterpretar la estructura del documento, haciendo la navegación confusa o poco confiable. Los motores de búsqueda también dependen del HTML semántico para entender la estructura de la página, así que el anidamiento incorrecto puede afectar cómo se indexa tu contenido.
Para solucionar este problema, mueve el elemento <main> fuera del <article> y hazlo hijo directo de <body> (o de un elemento que no sea de sección como <div>). Luego coloca tus elementos <article> dentro de <main>. También recuerda que solo debe existir un elemento <main> visible por página (elementos <main> adicionales deben tener el atributo hidden).
Ejemplos
Incorrecto: <main> anidado dentro de <article>
Esto desencadena el error de validación porque <main> es descendiente de <article>:
<article>
<main>
<h1>Mi Entrada de Blog</h1>
<p>Este es el contenido de la entrada.</p>
</main>
</article>
Incorrecto: <main> profundamente anidado dentro de <article>
El error también se desencadena cuando <main> es descendiente indirecto — no necesita ser hijo directo:
<article>
<div class="wrapper">
<main>
<h1>Mi Entrada de Blog</h1>
<p>Este es el contenido de la entrada.</p>
</main>
</div>
</article>
Correcto: <article> dentro de <main>
Invierte la relación de modo que <main> envuelva el contenido del artículo:
<main>
<article>
<h1>Mi Entrada de Blog</h1>
<p>Este es el contenido de la entrada.</p>
</article>
</main>
Correcto: múltiples artículos dentro de <main>
Un diseño típico de página con <main> conteniendo varios artículos junto con otro contenido:
<main>
<h1>Últimas Entradas</h1>
<article>
<h2>Primera Entrada</h2>
<p>Contenido de la primera entrada.</p>
</article>
<article>
<h2>Segunda Entrada</h2>
<p>Contenido de la segunda entrada.</p>
</article>
</main>Correcto: estructura completa del documento
Un documento completo válido que muestra la colocación correcta de <main> como hijo directo de <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blog - Últimas Entradas</title>
</head>
<body>
<header>
<nav>
<a href="/">Inicio</a>
<a href="/about">Acerca de</a>
</nav>
</header>
<main>
<h1>Últimas Entradas</h1>
<article>
<h2>Mi Entrada de Blog</h2>
<p>Este es el contenido de la entrada.</p>
</article>
</main>
<footer>
<p>© 2024 Mi Blog</p>
</footer>
</body>
</html>
La regla clave para recordar: <main> representa el contenido principal de la página y se sitúa en la parte superior de tu jerarquía de contenido. Los elementos de sección como <article>, <aside> y <nav> son componentes dentro de esa jerarquía y pertenecen dentro o junto a <main> — nunca alrededor de él.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.