¿Para qué sirve la etiqueta «main» y cuántas puede haber por página?
La etiqueta «main» define el contenido principal y único de tu página. Solo debe haber una visible. ¡Clave para la accesibilidad y el SEO de tu sitio!
La etiqueta <main> en HTML se utiliza para definir el contenido principal o dominante del <body> de un documento.
El contenido que se encuentra dentro del elemento <main> debería ser único para esa página en particular y no debería incluirse en otras secciones que se repiten a lo largo de múltiples páginas de un sitio, como pueden ser las barras de navegación, los logotipos del sitio, las cabeceras y pies de página generales, o las barras laterales.
El propósito fundamental de <main> es semántico: ayuda a las tecnologías de asistencia (como los lectores de pantalla para personas con discapacidad visual) y a los motores de búsqueda a identificar y acceder directamente al bloque de contenido más importante de la página, distinguiéndolo claramente de otros elementos estructurales como <header>, <footer>, <nav> o <aside>. Esto mejora significativamente la accesibilidad y puede contribuir al SEO.
¿Cuántas etiquetas <main> puede haber por página?
Según el estándar HTML actual (mantenido por el WHATWG), no debe haber más de un elemento <main> visible en un documento. Esto significa que, para la gran mayoría de las páginas web, utilizarás una única etiqueta <main>.
Es técnicamente posible tener múltiples elementos <main> en un mismo documento si todos, excepto uno, están ocultos utilizando el atributo hidden. Este caso podría darse en algunas aplicaciones de página única (SPA) donde diferentes vistas principales se muestran u ocultan dinámicamente. Sin embargo, la regla general y la práctica más común es tener solo un <main> activo y visible.
Además, es importante destacar que el elemento <main> no debe ser descendiente de elementos como <article>, <aside>, <footer>, <header> o <nav>.
Ejemplo de uso típico:
<!DOCTYPE <strong>html</strong>>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Página con Contenido Principal</title>
</head>
<body>
<header>
<h1>Logo y Título del Sitio</h1>
<nav>
</nav>
</header>
<main>
<h2>El Contenido Principal de Esta Página</h2>
<p>Aquí va toda la información central y única de esta vista específica del sitio web...</p>
<article>
<h3>Un artículo dentro del contenido principal</h3>
<p>Más detalles...</p>
</article>
</main>
<footer>
<p>© 2025 - Información de copyright y otros enlaces.</p>
</footer>
</body>
</html>
Lenguaje del código: PHP (php)Usar <main> correctamente es un paso importante hacia una web más semántica y accesible.
