Lección 8: Elementos semánticos de HTML5

Introducción a los elementos semánticos

Los elementos semánticos de HTML5 son etiquetas que proporcionan significado a la estructura de una página web. Estos elementos ayudan a los navegadores, motores de búsqueda y desarrolladores a entender mejor la organización y el propósito del contenido.

Comparación entre HTML básico y HTML semántico — Comparación entre la estructura de HTML básico y HTML semántico

Principales elementos semánticos de HTML5

<header>: Para el encabezado de la página o de una sección.
<nav>: Para la navegación principal del sitio.
<main>: Para el contenido principal de la página.
<article>: Para contenido independiente y autónomo.
<section>: Para agrupar contenido relacionado.
<aside>: Para contenido secundario o relacionado indirectamente.
<footer>: Para el pie de página o de una sección.
<figure>: Para contenido autónomo como imágenes, diagramas o fragmentos de código.
<figcaption>: Para proporcionar una descripción o leyenda a un elemento <figure>.

Ejemplo de estructura semántica

<body>
  <header>
    <h1>Mi Sitio Web</h1>
    <nav>
      <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Acerca de</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>Título del Artículo</h2>
      <p>Contenido del artículo...</p>
      <figure>
        <img src="imagen.jpg" alt="Descripción de la imagen">
        <figcaption>Leyenda de la imagen</figcaption>
      </figure>
    </article>
    
    <aside>
      <h3>Información Relacionada</h3>
      <p>Contenido adicional...</p>
    </aside>
  </main>
  
  <footer>
    <p>&copy; 2024 Mi Sitio Web</p>
  </footer>
</body>

Beneficios de usar elementos semánticos

Mejora la accesibilidad para usuarios con lectores de pantalla.
Facilita el SEO (Optimización para Motores de Búsqueda).
Hace que el código sea más legible y mantenible.
Ayuda a los navegadores a interpretar mejor el contenido.

Ejercicio práctico

Crea la estructura de una página web simple utilizando elementos semánticos de HTML5. Incluye un encabezado con navegación, un artículo principal, una barra lateral y un pie de página.