13. Etiquetas Semánticas HTML5

Curso HTML5 desde cero — Freimel Jerez

Las etiquetas semánticas describen el significado del contenido. Ayudan a los navegadores, buscadores (SEO) y lectores de pantalla a entender mejor tu sitio.

🧠 ¿Por qué usar semántica?

• Mejora el SEO
• Facilita la accesibilidad
• Ordena el código
• Hace tu web más profesional

🏗️ Estructura semántica básica

<header>
  <nav>Menú</nav>
</header>

<main>
  <section>
    <article>Contenido</article>
  </section>
</main>

<footer>Pie de página</footer>

🔹 Principales etiquetas

<header>

Encabezado del sitio o de una sección.

<nav>

Contiene enlaces de navegación.

<main>

Contenido principal del documento (solo uno por página).

<section>

Agrupa contenido relacionado.

<article>

Contenido independiente (post, noticia, tarjeta).

<aside>

Contenido secundario o complementario.

<footer>

Pie de página del sitio o sección.

❌ No semántico vs ✅ Semántico

<!-- ❌ NO recomendado -->
<div id="header">...</div>

<!-- ✅ Recomendado -->
<header>...</header>

🎥 Video de la lección

Debes ver el video completo para desbloquear la siguiente lección.

✅ Resumen

• Las etiquetas semánticas dan significado al contenido
• Mejoran SEO y accesibilidad
• Son estándar en HTML5

En la siguiente lección aprenderás a trabajar con media para la web.