Un documento no debe incluir más de un elemento “main” visible.

El elemento <main> representa el contenido dominante y único de un documento — el contenido principal que está directamente relacionado con o amplía el tema central de la página. Tener más de un elemento <main> visible crea ambigüedad: los navegadores, lectores de pantalla y otras tecnologías asistivas usan <main> para identificar el área de contenido principal, y múltiples instancias visibles hacen poco claro cuál bloque de contenido es realmente el principal.

Esto es particularmente importante para la accesibilidad. Los usuarios de lectores de pantalla a menudo dependen de la navegación por puntos de referencia para saltar directamente al contenido principal de una página. Cuando existen múltiples elementos <main> visibles, este atajo se vuelve poco confiable o confuso, ya que el usuario no tiene forma de saber cuál <main> contiene el contenido que está buscando.

Hay escenarios legítimos donde múltiples elementos <main> tienen sentido — por ejemplo, en aplicaciones de página única (SPAs) donde diferentes vistas se intercambian dinámicamente usando JavaScript. La especificación HTML acomoda esto permitiendo múltiples elementos <main> siempre que solo uno sea visible a la vez. Los otros deben estar ocultos usando el atributo hidden.

Cómo solucionarlo

• Si solo necesitas un área de contenido principal, elimina los elementos <main> adicionales y mantén solo uno.
• Si necesitas múltiples vistas (por ejemplo, para contenido con pestañas o navegación estilo SPA), añade el atributo hidden a todos los elementos <main> excepto al que está actualmente activo. Usa JavaScript para alternar la visibilidad añadiendo o eliminando el atributo hidden según sea necesario.

Ejemplos

❌ Inválido: Dos elementos <main> visibles

<header>
  <h1>My Website</h1>
</header>

<main>
  <h2>Welcome</h2>
  <p>This is the home page content.</p>
</main>

<main>
  <h2>About</h2>
  <p>This is the about page content.</p>
</main>

Ambos elementos <main> son visibles, lo cual viola la especificación y confunde a las tecnologías asistivas.

✅ Corregido: Un solo elemento <main>

Si no necesitas múltiples vistas, simplemente usa un <main>:

<header>
  <h1>My Website</h1>
</header>

<main>
  <h2>Welcome</h2>
  <p>This is the home page content.</p>
</main>

✅ Corregido: Múltiples elementos <main> con solo uno visible

Si necesitas múltiples vistas para navegación manejada por JavaScript, oculta todos excepto el activo usando el atributo hidden:

<header>
  <nav>
    <button onclick="switchView('home')">Home</button>
    <button onclick="switchView('about')">About</button>
  </nav>
</header>

<main id="home">
  <h2>Welcome</h2>
  <p>This is the home page content.</p>
</main>

<main id="about" hidden>
  <h2>About</h2>
  <p>This is the about page content.</p>
</main>

En este patrón, JavaScript alternaría el atributo hidden cuando el usuario navega entre vistas, asegurando que solo un <main> sea visible en cualquier momento.

❌ Inválido: Usar CSS en lugar de hidden

Ten en cuenta que ocultar un elemento <main> con CSS (por ejemplo, display: none o visibility: hidden) no satisface la especificación HTML. El validador verifica el atributo hidden, no los estilos CSS:

<!-- Esto aún activa el error de validación -->

<main>
  <h2>Welcome</h2>
</main>

<main style="display: none;">
  <h2>About</h2>
</main>

Siempre usa el atributo hidden para indicar que un elemento <main> no es actualmente relevante para la página.

Más información:

MDN Reference

MDN: Aria Main role

→

WHATWG Spec

HTML Spec: the main element

→