Saltar al contenido principal

Etiquetas Semánticas en HTML5

Antes de HTML5, los desarrolladores web estructuraban y diseñaban casi toda la página usando un solo elemento: <div>.

Los <div> son genéricos carecen de significado inherente; no le dicen nada al navegador, ni a los motores de búsqueda, ni a los lectores de pantalla sobre qué contienen (si es el menú principal, el contenido de un artículo, o el pie de página).

HTML Semántico se refiere al uso de etiquetas que describen claramente su significado (su semántica) a la máquina que lee el documento.

Beneficios de la Semántica​

  1. Accesibilidad: Los lectores de pantalla para usuarios con discapacidad visual pueden utilizar estas etiquetas como "señales" para navegar rápidamente por la página web.
  2. SEO (Optimización de Motores de Búsqueda): Los motores de búsqueda dan más importancia al contenido dentro de etiquetas como <h1> o <article> que al que se encuentra en un <div> común, lo que ayuda a indexar correctamente y priorizar tu contenido.
  3. Código Limpio y Mantenible: Hace que el código sea mucho más fácil de leer, entender y mantener para los desarrolladores.

Etiquetas Semánticas Estructurales Comunes​

  • <header>: Representa un grupo de contenido introductorio o herramientas de navegación central para una página o una sección. (Suele contener el logotipo, título y a menudo la barra de navegación).
  • <nav>: Representa una sección que contiene enlaces de navegación importantes hacia el documento actual u otros documentos.
  • <main>: Especifica el contenido dominante o principal o específico de la página. Debe haber solo un elemento <main> visible por documento.
  • <article>: Representa una composición independiente y autónoma en un documento. (Como la entrada de un blog, un artículo de noticias, un tweet). Debería tener sentido por sí mismo.
  • <section>: Representa una sección genérica independiente en un documento, a menudo (pero no siempre) con su propio encabezado. Se usa para agrupar contenido temáticamente relacionado.
  • <aside>: Representa una porción del documento cuyo contenido está indirectamente relacionado con el contenido principal. Se representa a menudo como barras laterales que contienen cosas como glosarios, banners o menús secundarios.
  • <footer>: Representa el pie de página para su sección ancestro más cercana o para todo el documento. Típicamente contiene información de derechos de autor, autoría, enlaces a políticas de privacidad, etc.

Ejemplo Visual de una Estructura Semántica​

<body>
  <header>
    <h1>Mi Blog Personal</h1>
    <nav>
      <ul>
        <li><a href="/">Inicio</a></li>
        <li><a href="/acerca">Acerca</a></li>
        <li><a href="/contacto">Contacto</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
        <h2>Cómo aprender HTML en 3 días</h2>
        <p>Publicado: 12 de Octubre, 2023</p>
        <p>Aprender HTML es sorprendentemente simple...</p>
    </article>
    <article>
        <h2>10 Etiquetas Semánticas Que Debes Conocer</h2>
        <p>Publicado: 15 de Octubre, 2023</p>
        <p>El HTML moderno va más allá de los divs...</p>
    </article>
  </main>
    
  <aside>
    <h3>Categorías Búsqueda</h2>
    <ul>
        <li><a href="#">Tecnología</a></li>
        <li><a href="#">Desarrollo Web</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2023 Mi Blog Personal. Todos los derechos reservados.</p>
  </footer>
</body>