Estructuras en HTML5

¿Qué Son las Etiquetas Semánticas?

Las etiquetas semánticas en HTML5 son aquellas que tienen nombres significativos que indican el tipo de contenido que contienen. Por ejemplo, <header>, <footer>, <table>, etc. Estas etiquetas ayudan a dar sentido al contenido y a instruir al navegador sobre cómo tratarlos [0][1][3].

Ejemplos de Etiquetas Semánticas

<article>: Define contenido independiente y autónomo.
<aside>: Define contenido que está aparte del contenido principal de la página.
<details>: Define detalles adicionales que el usuario puede ver u ocultar.
<figcaption>: Define una leyenda para un elemento <figure>.
<figure>: Especifica contenido autónomo, como ilustraciones, diagramas, fotos, listados de código, etc.
<footer>: Define un pie de página para un documento o sección.
<header>: Especifica un encabezado para un documento o sección.
<main>: Especifica el contenido principal de un documento.
<mark>: Define texto marcado o resaltado.
<nav>: Define enlaces de navegación.
<section>: Define una sección en un documento.
<summary>: Define un título visible para un elemento <details>.
<time>: Define una fecha/hora [0].

Beneficios de las Etiquetas Semánticas

El uso de etiquetas semánticas en lugar de elementos no semánticos como <div> y <span> mejora la legibilidad del código y facilita su mantenimiento. Además, proporciona una mejor accesibilidad, ya que los motores de búsqueda y las tecnologías de asistencia pueden interpretar mejor el contenido y su estructura [2][3].

Ejemplo de Código Semántico vs No Semántico

Ejemplo Semántico
Section titled “Ejemplo Semántico”

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Documento</title>
  </head>
  <body>
    <header>
      <!-- Contenido del encabezado aquí -->
    </header>

    <section>
      <article>
        <figure>
          <img src="image.jpg" alt="Descripción de la imagen" />
          <figcaption>Leyenda de la imagen</figcaption>
        </figure>
      </article>
    </section>

    <footer>
      <!-- Contenido del pie de página aquí -->
    </footer>
  </body>
</html>

Ejemplo NO Semántico
Section titled “Ejemplo NO Semántico”

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Documento</title>
  </head>
  <body>
    <div id="header">
      <!-- Contenido del encabezado aquí -->
    </div>

    <div class="section">
      <div class="article">
        <div class="figure">
          <img src="image.jpg" alt="Descripción de la imagen" />
          <div class="figcaption">Leyenda de la imagen</div>
        </div>
      </div>
    </div>

    <div id="footer">
      <!-- Contenido del pie de página aquí -->
    </div>
  </body>
</html>

Como puedes ver, el uso de etiquetas semánticas hace que el código sea más limpio y fácil de entender, tanto para los desarrolladores como para las máquinas.

Resumen

Las etiquetas semánticas y estructurales de HTML5 son esenciales para construir páginas web que sean fáciles de entender y de mantener, además de ser accesibles y amigables para los motores de búsqueda. Al utilizar estas etiquetas, los desarrolladores pueden asegurarse de que están creando contenido web que es claro, coherente y significativo tanto para los humanos como para las máquinas.