Etiqueta main en HTML: contenido principal y accesibilidad

La etiqueta <main> identifica el contenido dominante del cuerpo de un documento: aquello que desarrolla el tema o la función propia de esa página. Úsala, por ejemplo, para la lección de un curso, dejando fuera la navegación que se repite entre lecciones. Así las tecnologías de asistencia pueden reconocer la región principal y quienes navegan con teclado pueden llegar a ella mediante un enlace de salto.

Ejemplo mínimo: identificar el contenido principal

<a href="#contenido">Saltar al contenido</a>
<main id="contenido">
  <h1>Curso de HTML</h1>
  <p>Comienza con las etiquetas básicas.</p>
</main>

Se ven el enlace, el título y el párrafo. <main> identifica su zona dominante; id="contenido" proporciona el destino de href="#contenido". La etiqueta no añade un borde, una anchura especial ni un título: la apariencia depende del contenido y de CSS.

Para probarlo, sustituye el contenido del <body> del documento completo de abajo por este fragmento. Activa el enlace y comprueba que la dirección termina en #contenido. En una página corta quizá no notes desplazamiento; la sección sobre teclado explica cómo comprobar también el foco.

Sintaxis y contexto válido

Se escribe con apertura <main> y cierre </main>; ninguna se puede omitir. Admite contenido de flujo: encabezados, párrafos, artículos, secciones, listas, imágenes o formularios, respetando las restricciones de cada elemento.

Sus ancestros solo pueden ser <html>, <body>, <div>, <form> sin nombre accesible y elementos personalizados autónomos. Por tanto, no lo anides dentro de <article>, <aside>, <footer>, <header>, <nav>, <section> ni otro <main>, aunque haya un <div> intermedio. Lo habitual es colocarlo directamente en <body> o en un contenedor <div> de la página.

Un documento no debe tener más de un <main> sin el atributo hidden. Ocultar uno únicamente con CSS no cumple esa regla. Estas restricciones y el modelo de contenido proceden del HTML Living Standard para <main>.

Qué pertenece a main y qué pertenece a body

En una página de curso, el título de la lección, su explicación y sus ejercicios pertenecen a <main>. El logotipo global, el menú compartido y el pie general quedan fuera. Un índice propio de la lección sí puede formar parte del contenido principal: la decisión depende de su función, no solo de si contiene enlaces.

¿Main y body son lo mismo? No. <body> contiene todo el cuerpo de la página, incluida su cabecera, navegación y región principal. <main> identifica el contenido dominante dentro de ese cuerpo. Tampoco sustituye a <article> o <section>: puedes reunir esas piezas dentro de la zona principal.

Caso práctico: una lección con cabecera y pie

Guarda este documento como leccion.html, en UTF-8, y ábrelo en el navegador. Incluye todos los estilos que utiliza y no necesita archivos externos ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Primera página | Aula Web</title>
    <style>
      body {
        max-width: 55rem;
        margin: auto;
        padding: 1rem;
        font-family: sans-serif;
        line-height: 1.6;
      }
      nav { display: flex; flex-wrap: wrap; gap: 1rem; }
      main { margin-block: 2rem; }
      main:focus { outline: 3px solid #174ea6; outline-offset: 4px; }
    </style>
  </head>
  <body>
    <a href="#contenido">Saltar al contenido</a>

    <header>
      <p>Aula Web</p>
      <nav aria-label="Curso">
        <a href="#leccion">Lección</a>
        <a href="#practica">Ejercicio</a>
      </nav>
    </header>

    <main id="contenido" tabindex="-1">
      <h1 id="leccion">Prepara tu primera página</h1>
      <p>Escribe un título y un párrafo que presente tu tema.</p>
      <p><a href="#practica">Ir al ejercicio de esta lección</a></p>
      <section id="practica">
        <h2>Ejercicio</h2>
        <p>Crea una página sobre un lugar que conozcas y describe qué puedes hacer allí.</p>
      </section>
    </main>

    <footer>
      <p>Aula Web · Material de estudio.</p>
    </footer>
  </body>
</html>

Primero aparece el enlace de salto, seguido del nombre del sitio y su navegación. Después se muestra la lección con su ejercicio; al final, el pie. La cabecera y el menú quedan fuera de <main>. El margen separa visualmente la lección, pero no es lo que la convierte en región principal.

Si sustituyes <main> por <div>, conservando id y tabindex, el enlace sigue teniendo destino y el contenido sigue visible, pero desaparece el hito principal nativo. Si retiras el contenedor por completo, el texto permanece, pero también eliminas id="contenido": el enlace deja de encontrar su destino. Cambiar solo los estilos mantiene el significado de <main>.

Cómo probar el enlace de salto y el foco

Un enlace de salto permite evitar los bloques repetidos antes de la lección. Debe estar al principio y ser visible, al menos cuando recibe foco; aquí permanece visible siempre. La técnica G1 de W3C propone comprobar tanto su disponibilidad como la llegada del foco al contenido principal.

Prueba el documento desde una carga nueva:

1. Pulsa Tab hasta enfocar «Saltar al contenido» y actívalo con Enter.
2. Comprueba #contenido en la dirección y el contorno alrededor de la región principal. Si la página es suficientemente larga, también se desplaza hasta ella.
3. Pulsa Tab otra vez: debes llegar a «Ir al ejercicio de esta lección», saltando los enlaces del menú.
4. Repite con JavaScript desactivado. Este ejemplo utiliza navegación nativa y conserva su funcionamiento.

Desplazar la vista y mover el foco son comportamientos distintos. Si tu navegador solo desplaza la página al activar el ejemplo mínimo, añade tabindex="-1" al destino, como en el caso práctico, y repite la comprobación. Este atributo hace enfocable la región sin añadirla al recorrido ordinario de Tab. No lo sustituyas por un valor positivo ni retires el indicador de foco.

Puedes inspeccionar document.activeElement en la consola para confirmar el destino enfocado. Si una aplicación gestiona el salto mediante JavaScript, debe comprobar también la llamada a focus() y conservar una alternativa útil sin scripts. El estándar sobre tabindex describe su relación con el foco.

Atributos, accesibilidad y paneles inactivos

<main> no tiene atributos específicos. Admite globales como id, class, lang, tabindex y hidden. margin-block es una propiedad CSS; focus() es un método del DOM utilizado desde JavaScript, no un atributo HTML.

La región tiene implícitamente el rol accesible main. No añadas role="main": resulta redundante. Los lectores de pantalla pueden utilizar este hito para navegar, aunque el anuncio concreto depende del navegador y de la tecnología de asistencia. Los títulos siguen necesitando una jerarquía clara.

¿Se pueden tener dos main? El documento admite varios si todos salvo uno tienen hidden. Por ejemplo, una aplicación puede mantener paneles principales inactivos ocultos y mostrar solo el actual. Al cambiar de panel, debe ocultar el anterior antes de presentar el siguiente y gestionar el foco. Esto no justifica mostrar dos áreas principales simultáneas. Para una página estática como la lección, basta uno.

Errores frecuentes y etiquetas relacionadas

• Crear un <main> por cada sección: reúne las secciones del tema dentro de una sola región principal.
• Meterlo en la cabecera o en un artículo: invierte la estructura y revisa todos sus ancestros.
• Elegirlo solo para centrar una caja: aplica CSS al contenedor adecuado según su función.
• Enlazar a un ID inexistente o repetido: el destino contenido debe identificar un único elemento.

<header> reúne introducción y ayudas de navegación; <nav> identifica grupos de navegación relevantes. <a> crea el enlace que permite saltar al destino. Ninguno sustituye la función de <main>.

Compatibilidad y fuentes

<main> está ampliamente disponible en los navegadores actuales, según la referencia de MDN y su información de compatibilidad, consultada el 5 de octubre de 2026. Comprueba el salto, el foco y el hito en los navegadores y tecnologías de asistencia de tu público: el soporte del elemento no garantiza un anuncio o un manejo del foco idéntico en todos ellos.