Etiqueta HTML <main>
La etiqueta define el contenido principal del documento en HTML5. Descripción, atributos y ejemplos de la etiqueta.
La etiqueta <main> es un elemento de bloque introducido en la especificación de HTML5. Envuelve el contenido dominante del <body> del documento — el contenido único de ese documento que no se repite en las demás páginas del sitio, como el encabezado del sitio, el menú de navegación, la barra lateral, el cuadro de búsqueda o el pie de página.
Esta página explica para qué sirve <main>, cómo encaja en una estructura de documento completa junto con <header>, <nav> y <footer>, cómo activa los enlaces "saltar al contenido" y las reglas sobre el uso de más de un <main> en una página.
Dónde puede y dónde no puede ir <main>
El elemento <main> no debe colocarse dentro de un elemento <article>, <aside>, <footer>, <header> o <nav> — <main> es una región de nivel superior, por lo que esos contenedores no le aplican.
Este elemento forma parte del árbol DOM pero está excluido del esquema del documento, a diferencia de los elementos de encabezado como <h1> a <h6>, que sí contribuyen a él.
Accesibilidad y el landmark main
<main> representa el landmark ARIA main. Las tecnologías de asistencia, como los lectores de pantalla, exponen los landmarks para que los usuarios puedan saltar directamente a las regiones principales de una página. Se recomienda usar el elemento <main> en lugar de añadir role="main" a un elemento genérico como un <div>, ya que <main> lleva ese rol de forma implícita.
Debe haber exactamente un landmark main por página. Los usuarios de teclado y lectores de pantalla también pueden saltar el contenido repetido (navegación, banners, anuncios) mediante la técnica de "saltar la navegación". Si se le asigna un id al elemento <main>, ese id se convierte en el destino de un enlace de salto — véase el ejemplo a continuación.
Sintaxis
La etiqueta <main> va en pares. El contenido se escribe entre las etiquetas de apertura (<main>) y cierre (</main>).
Ejemplo de la etiqueta HTML <main>:
Etiqueta HTML <main>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<h1>Programming languages</h1>
<p>
Languages HTML and CSS are intended for site layout.
</p>
<article>
<h2>HTML</h2>
<p>
HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages.
</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>CSS</h2>
<p>
CSS is a language of styles, defining the display of HTML documents.
</p>
<p>... </p>
</article>
</main>
</body>
</html><main> en una estructura de documento completa
En una página real, <main> se sitúa junto a los demás elementos landmark. El encabezado, la navegación y el pie de página se repiten en todas las páginas, por lo que permanecen fuera de <main>; solo el contenido específico de la página va dentro de él.
<!DOCTYPE html>
<html>
<head>
<title>Programming languages</title>
</head>
<body>
<header>
<h1>My Web Tutorials</h1>
</header>
<nav>
<a href="/html">HTML</a> |
<a href="/css">CSS</a> |
<a href="/js">JavaScript</a>
</nav>
<main>
<h2>Programming languages</h2>
<p>HTML and CSS are intended for site layout.</p>
</main>
<footer>
<p>© 2026 My Web Tutorials</p>
</footer>
</body>
</html>Agregar un enlace "saltar al contenido principal"
Un enlace de salto permite a los usuarios de teclado y lectores de pantalla saltar directamente la navegación repetida. El href del enlace debe coincidir con el id del elemento <main>:
<body>
<a href="#main-content">Skip to main content</a>
<header>
<h1>My Web Tutorials</h1>
</header>
<nav>
<a href="/html">HTML</a> |
<a href="/css">CSS</a>
</nav>
<main id="main-content">
<h2>Programming languages</h2>
<p>HTML and CSS are intended for site layout.</p>
</main>
</body>Al activar el enlace, el foco se mueve a #main-content, de modo que el usuario llega directamente al contenido principal de la página.
Usar más de un <main> con el atributo hidden
Una página puede contener solo un elemento <main> visible. Cualquier elemento <main> adicional debe llevar el atributo hidden. Esto resulta útil en aplicaciones de página única (SPAs), donde varias "vistas" existen en el DOM al mismo tiempo pero solo se muestra la vista activa:
<main>
<h2>Home view</h2>
<p>This view is visible.</p>
</main>
<main hidden>
<h2>Settings view</h2>
<p>This view is in the DOM but hidden until activated.</p>
</main>Cuando el usuario cambia de vista, el script intercambia el atributo hidden para que exactamente un <main> sea visible en todo momento.
Atributos
La etiqueta <main> admite los Atributos Globales y los Atributos de Evento.
Aplicar estilos al elemento <main>
<main> es simplemente un contenedor estructural, por lo que se puede estilizar como cualquier elemento de bloque. Dado que contiene el contenido principal de la página, es un lugar natural para definir el ancho de lectura general, el relleno y el espaciado:
main {
display: block; /* ensures block layout in older browsers */
max-width: 800px;
margin: 0 auto; /* center the content column */
padding: 20px;
background-color: #f9f9f9;
}