Semántica HTML5

Aprende a usar las etiquetas semánticas de HTML5 para crear páginas accesibles y bien estructuradas.

📖

Teoría

HTML5 introdujo etiquetas semánticas que describen el propósito del contenido, no solo su apariencia:

<header> → Encabezado de página o sección

<nav> → Navegación principal

<main> → Contenido principal (uno por página)

<section> → Sección temática con su propio encabezado

<article> → Contenido independiente (post, noticia)

<aside> → Contenido relacionado lateralmente

<footer> → Pie de página o sección

html

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Blog de Tecnología</title>
</head>
<body>
  <header>
    <h1>TechBlog</h1>
    <nav>
      <ul>
        <li><a href="/">Inicio</a></li>
        <li><a href="/articulos">Artículos</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>¿Qué es la IA?</h2>
      <p>La inteligencia artificial es...</p>
    </article>
    <aside>
      <h3>Artículos relacionados</h3>
      <ul><li><a href="#">Machine Learning</a></li></ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 TechBlog</p>
  </footer>
</body>
</html>

⚡

Ejercicio práctico

🎯 Tu misión

Refactoriza una página hecha solo con `<div>` para usar la semántica correcta de HTML5. El resultado debe ser equivalente visualmente pero semánticamente correcto.

Vista previa

←Capítulo anterior

Siguiente capítulo→