La Etiqueta MAIN

Es un elemento semántico que representa el contenido principal único de una página web. Su propósito es agrupar el contenido central.

La etiqueta <main> es un elemento semántico que representa el contenido principal único de una página web. Su propósito es agrupar el contenido central (como artículos, formularios o secciones clave) y mejorar la accesibilidad, permitiendo que tecnologías como lectores de pantalla identifiquen rápidamente el contenido relevante.

Características clave:

Debe haber solo un <main> por página.
No debe incluir contenido repetitivo (como menús de navegación o pies de página).
Es parte de los elementos de landmark (puntos de referencia para accesibilidad).

Sintaxis básica

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de &lt;main&gt;</title>
</head>
<body>
  <header>
    <h1>Mi Sitio Web</h1>
    <nav>...</nav>
  </header>

  <main>
    <h2>Contenido Principal</h2>
    <p>Este es el contenido central de la página.</p>
    <!-- Artículos, secciones, formularios, etc. -->
  </main>

  <footer>...</footer>
</body>
</html>

Importancia para la accesibilidad

Los lectores de pantalla (como JAWS o NVDA) saltan directamente al <main> para que los usuarios accedan al contenido relevante sin navegar por elementos repetitivos.
Mejora el SEO, ya que los motores de búsqueda priorizan el contenido dentro de <main>.

Casos de uso comunes

Página de blog

<main>
  <article>
    <h1>Título del artículo</h1>
    <p>Contenido del artículo...</p>
  </article>
  <section class="comentarios">
    <h2>Comentarios</h2>
    <!-- Formulario y lista de comentarios -->
  </section>
</main>

Tienda en línea

<main>
  <h1>Productos destacados</h1>
  <div class="productos">
    <!-- Tarjetas de productos -->
  </div>
</main>

Página de contacto

<main>
  <h1>Contáctanos</h1>
  <form>
    <!-- Campos del formulario -->
  </form>
</main>

Mejores prácticas

Úsalo una sola vez: Evita múltiples etiquetas <main> en una misma página.

Excluye contenido repetido: No incluyas headers, footers o sidebars dentro de <main>.

Combínalo con otros elementos semánticos:

<body>
  <header>...</header>
  <main>
    <article>...</article>
    <aside>...</aside> <!-- Solo si es parte del contenido principal -->
  </main>
  <footer>...</footer>
</body>

Jerarquiza el contenido: Usa encabezados (<h1>, <h2>) dentro de <main> para estructurar la información.

Errores comunes

Múltiples <main> en una página:

<!-- Incorrecto -->
<main>...</main>
<main>...</main>

Anidar <main> dentro de secciones repetitivas:

<!-- Incorrecto -->
<header>
  <main>...</main>
</header>

Usar <main> como contenedor genérico:

<!-- Incorrecto -->
<main>
  <nav>...</nav> <!-- El menú no es contenido principal -->
</main>

Estilización con CSS

Aunque <main> no tiene estilos por defecto, puedes personalizarlo:

main {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Para móviles */
@media (max-width: 768px) {
  main {
    padding: 10px;
  }
}

Compatibilidad con navegadores

Soporte universal: Funciona en todos los navegadores modernos (Chrome, Firefox, Safari, Edge).

Fallback para navegadores antiguos:
Si necesitas soporte para IE11, agrega este script en el <head>:

<!--[if lt IE 9]>
  <script>
    document.createElement('main');
  </script>
<![endif]-->

Ejemplo avanzado: Estructura completa

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Blog Semántico</title>
  <style>
    main {
      background: #f9f9f9;
      padding: 2rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Mi Blog</h1>
    <nav>
      <a href="/">Inicio</a>
      <a href="/contacto">Contacto</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Cómo usar HTML semántico</h2>
      <p>Guía práctica para mejorar la accesibilidad...</p>
    </article>
    <section aria-label="Comentarios">
      <h3>Deja tu comentario</h3>
      <form>...</form>
    </section>
  </main>

  <footer>
    <p>© 2024 Mi Blog. Todos los derechos reservados.</p>
  </footer>
</body>
</html>

Conclusión

La etiqueta <main> es esencial para crear páginas web accesibles, bien estructuradas y SEO-friendly. Al usarla correctamente, no solo mejoras la experiencia del usuario, sino que también facilitas el mantenimiento de tu código. ¡Inclúyela siempre en tus proyectos!