<main> es el elemento semántico que contiene el contenido principal de la página — la razón por la que el usuario llegó a esa URL específica. Si el <header>, <nav> y <footer> son elementos compartidos que aparecen en prácticamente todas las páginas del sitio, <main> es lo que las diferencia entre sí. En una página de producto es la ficha del producto. En un artículo de blog es el texto del artículo. En la página de inicio es el contenido de bienvenida y las secciones destacadas.

La característica más importante de <main> es su unicidad: solo puede haber un <main> activo por documento. No uno prominente y varios secundarios — uno solo. Esta regla viene de la especificación HTML Living Standard y tiene sentido tanto semántico como de accesibilidad: si hubiera dos <main>, ninguno de los dos sería “el contenido principal”. La unicidad es lo que hace útil al landmark main para los usuarios de lectores de pantalla — saben que ese destino es inequívoco.

Esta unicidad contrasta directamente con <header> y <footer>, que pueden aparecer varias veces en la misma página (uno por <article>, uno por <section>, etc.). <main> no puede anidarse dentro de <article>, <aside>, <footer>, <header> ni <nav> — solo puede ser hijo de <body> (o de un elemento con rol de landmark compatible). Esa posición de hijo directo de <body> es su lugar natural y correcto.

Cómo funciona

<main> es un elemento de contenido de flujo con display block por defecto. Su contenido puede ser prácticamente cualquier estructura semántica: <article>, <section>, <aside>, <h1>, <p>, formularios, listas — todo lo que constituye el contenido principal de esa página en particular.

El landmark ARIA que genera es main. Este landmark es especialmente valioso para la accesibilidad porque permite a los usuarios de lectores de pantalla (y navegación por teclado) saltar directamente al contenido principal sin pasar por el <header> y el <nav> — que pueden tener docenas de links. Es el mecanismo que hace posible la funcionalidad “saltar al contenido” que muestran muchos sitios accesibles.

La regla de unicidad tiene una excepción técnica: puede haber múltiples elementos <main> en el DOM si los adicionales tienen el atributo hidden. Esto se usa en SPAs (Single Page Applications) donde varios “screens” están en el DOM simultáneamente pero solo uno está visible. En un documento HTML estático con un solo <main>, la unicidad es absoluta.

Modelo de contenido

<main> acepta contenido de flujo. No puede ser descendiente de <article>, <aside>, <footer>, <header> ni <nav>. Su posición correcta es como hijo directo de <body>, o dentro de un elemento que funcione como raíz de la sección del documento.

Lo que sí puede contener <main> es prácticamente cualquier cosa: headings, <section>, <article>, <aside>, formularios, tablas, medios — lo que sea que constituya el contenido principal de esa página.

Sintaxis

<body>
  <header>
    <!-- logo + nav -->
  </header>

  <main>
    <h1>Guía completa de CSS Flexbox</h1>

    <section>
      <h2>¿Qué es Flexbox?</h2>
      <p>Flexbox es un modelo de layout unidimensional...</p>
    </section>

    <section>
      <h2>Propiedades del contenedor</h2>
      <!-- contenido -->
    </section>
  </main>

  <footer>
    <!-- pie de página -->
  </footer>
</body>

<header> logo · nav

Guía completa de CSS Flexbox

El contenido principal de esta página vive aquí.

Atributos

<main> no tiene atributos propios. Acepta todos los atributos globales de HTML. El atributo global id suele usarse para que el enlace “saltar al contenido” funcione:

<!-- En el header, antes del nav -->
<a href="#contenido-principal" class="skip-link">Saltar al contenido</a>

<main id="contenido-principal">
  ...
</main>

Rol de landmark y accesibilidad

El rol ARIA implícito de <main> es main, siempre. No varía según el contexto — a diferencia de <header> y <footer>, <main> siempre es el landmark main.

La unicidad del landmark main en la página es lo que lo hace valioso: los usuarios de lectores de pantalla pueden activar “ir al contenido principal” y saben con certeza que van a llegar al contenido relevante. Si hubiera varios <main>, esta garantía se rompería.

El patrón de accesibilidad más recomendado junto con <main> es un skip link: un enlace visible al hacer foco que lleva directamente al <main> (o a su id). Es especialmente importante para usuarios de teclado que de otro modo tendrían que tabular por todos los elementos interactivos del <header> en cada carga de página.

Cuándo usar / reglas prácticas

Regla	Detalle
Uno solo por página	La especificación lo exige. Más de un `<main>` visible es un error.
Hijo de `<body>`	No anidar dentro de `<article>`, `<aside>`, `<footer>`, `<header>` ni `<nav>`.
Siempre presente	Toda página con contenido propio debería tener `<main>`. Las únicas excepciones son páginas 100% de navegación sin contenido propio.
El `<h1>` de la página va aquí	El heading principal del contenido debe estar dentro de `<main>`, no en el `<header>` del sitio.

Notas, gotchas e interacción

No confundir con el <h1>. El <main> delimita el bloque de contenido principal; el <h1> es el título de ese contenido. Ambos trabajan juntos: <main> como contenedor, <h1> como su primer heading.
Sin CSS, no se ve nada especial. <main> tiene display block como cualquier <div>. No tiene estilos por defecto que lo distingan visualmente — eso es responsabilidad del CSS del proyecto.
En aplicaciones con varios screens: si usás JavaScript para mostrar/ocultar secciones de la página sin navegar, el <main> visible debe ser único. Los que no están visibles deben llevar el atributo hidden.
El <aside> puede ir dentro o fuera del <main>. Un <aside> dentro del <main> es contenido complementario al contenido principal (nota al margen dentro del artículo). Un <aside> hermano del <main> (fuera de él) es la barra lateral de la página. Ambos son válidos.

Vigente / legacy

<main> está completamente vigente desde HTML5. Su predecesor funcional, <div id="main"> o <div id="contenido">, es legacy: no genera el landmark main ni comunica la unicidad del contenido principal. No hay atributos propios de <main> marcados como legacy.