HTML semántico

Puedes construir una página entera solo con <div> y se verá igual… pero para Google, los lectores de pantalla y otros desarrolladores será una caja negra. En esta lección aprenderás las etiquetas que dan significado a cada parte de la página y por qué eso hace tus proyectos más profesionales.

Concepto

"Semántica" significa "relativo al significado". HTML semántico es usar la etiqueta que describe qué es el contenido, no cómo se ve.

Imagina un edificio de oficinas. Si todas las puertas dijeran "Puerta", tendrías que abrir cada una para saber qué hay. Si dicen "Recepción", "Sala de juntas", "Baños", "Salida de emergencia", te orientas al instante. Las etiquetas semánticas son esos letreros.

<!-- ❌ "Sopa de divs": no dice nada -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="post">...</div>
</div>
<div class="footer">...</div>

<!-- ✅ Semántico: cada parte se explica sola -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Por qué importa

1. Accesibilidad: los lectores de pantalla crean un mapa de "regiones" (landmarks). El usuario puede saltar directo a la navegación o al contenido principal.
2. SEO: Google entiende mejor qué es el contenido principal, qué es un artículo y qué es relleno.
3. Mantenimiento: tú (o tu equipo) entienden el código seis meses después.
4. Funciones gratis: modo lectura de Safari/Firefox, vistas previas de enlaces y extensiones dependen de la semántica.
5. Comportamiento nativo: <button>, <details> o <dialog> traen teclado y accesibilidad incluidos.

Las etiquetas de estructura

Layout semántico etiquetado

✏️ Editar en el Playground↗ Abrir en pestaña nueva

header

Encabezado introductorio de la página o de una sección/artículo. Suele contener logo, título y navegación.

<header>
  <a href="/"><img src="logo.svg" alt="Café Aroma - Inicio"></a>
  <nav>...</nav>
</header>

Puede haber varios <header> (uno de la página y uno dentro de cada <article>).

nav

Bloque de navegación principal: menú del sitio, índice, migas de pan. No todos los grupos de enlaces son <nav> (los enlaces legales del pie pueden ir sin él).

<nav aria-label="Principal">
  <ul>
    <li><a href="/" aria-current="page">Inicio</a></li>
    <li><a href="/menu">Menú</a></li>
  </ul>
</nav>

<nav aria-label="Migas de pan">
  <ol>
    <li><a href="/">Inicio</a></li>
    <li><a href="/blog">Blog</a></li>
    <li aria-current="page">Café de olla</li>
  </ol>
</nav>

Si hay más de un <nav>, distínguelos con aria-label. aria-current="page" marca la página actual.

main

El contenido principal y único de la página. Solo puede haber un <main> visible y no va dentro de <header>, <footer>, <article> ni <aside>.

article

Contenido independiente que tendría sentido por sí solo si lo sacaras de la página: una entrada de blog, una noticia, una tarjeta de producto, un comentario, una reseña.

Pregunta clave: ¿podría publicarse en otro sitio y seguir entendiéndose? Si sí, es un <article>.

<article>
  <header>
    <h2>Cómo preparar café de olla</h2>
    <p>Por Ana López · <time datetime="2026-10-12">12 de octubre de 2026</time></p>
  </header>
  <p>El secreto está en el piloncillo…</p>
  <footer>
    <p>Etiquetas: recetas, café mexicano</p>
  </footer>
</article>

section

Agrupa contenido temático que normalmente tiene su propio encabezado: "Servicios", "Precios", "Testimonios". Si no puedes ponerle un título, probablemente debería ser un <div>.

<section aria-labelledby="titulo-precios">
  <h2 id="titulo-precios">Precios</h2>
  ...
</section>

aside

Contenido relacionado pero secundario: barra lateral, artículos relacionados, publicidad, una nota al margen.

footer

Pie de la página o de una sección: derechos, contacto, enlaces legales, redes sociales.

address

Información de contacto del autor o del negocio (no cualquier dirección postal del texto).

<footer>
  <address>
    Café Aroma · Av. Francisco Sosa 123, Coyoacán<br>
    <a href="tel:+525512345678">55 1234 5678</a>
  </address>
  <p><small>&copy; 2026 Café Aroma</small></p>
</footer>

section, article o div

Pregunta	Etiqueta
¿Tiene sentido por sí solo, fuera de la página?	<article>
¿Es un bloque temático con título?	<section>
¿Solo lo necesito para aplicar estilos o agrupar?	<div>

<div> no es malo: es la opción correcta cuando no hay significado. Lo malo es usarlo en lugar de una etiqueta con significado.

Etiquetas semánticas de texto

<!-- time: fechas y horas legibles por máquinas -->
<p>Abrimos el <time datetime="2026-11-01">1 de noviembre</time>.</p>
<p>Horario: <time datetime="08:00">8 a.m.</time> a <time datetime="21:00">9 p.m.</time></p>
<p>Duración: <time datetime="PT45M">45 minutos</time></p>

<!-- mark: texto resaltado por relevancia (por ejemplo, términos buscados) -->
<p>Resultados para "olla": café de <mark>olla</mark> con canela.</p>

<!-- data: un valor legible por máquinas -->
<p>Producto: <data value="SKU-1023">Taza negra mate</data></p>

Elementos interactivos nativos

details y summary

Un acordeón sin JavaScript, accesible con teclado y lector de pantalla:

<details>
  <summary>¿Tienen opciones sin lactosa?</summary>
  <p>Sí, leche de almendra, avena y deslactosada sin costo extra.</p>
</details>

<!-- open: abierto por defecto -->
<details open>
  <summary>¿Hacen envíos?</summary>
  <p>Sí, en un radio de 5 km.</p>
</details>

<!-- name: acordeón exclusivo (al abrir uno se cierran los demás) -->
<details name="faq">...</details>
<details name="faq">...</details>

Perfecto para preguntas frecuentes, "Ver más detalles" o filtros en móvil.

dialog

Ventana modal nativa: maneja el foco, la tecla Esc y el fondo oscuro por ti.

<button type="button" id="abrir">Suscribirme</button>

<dialog id="modal" aria-labelledby="titulo-modal">
  <!-- method="dialog" cierra el modal al enviar, sin recargar -->
  <form method="dialog">
    <h2 id="titulo-modal">¿Recibir promociones?</h2>
    <p>Un correo al mes con descuentos.</p>
    <button value="no">Ahora no</button>
    <button value="si">Sí, quiero</button>
  </form>
</dialog>

const modal = document.getElementById('modal');
document.getElementById('abrir').addEventListener('click', () => {
  modal.showModal(); // modal: bloquea el resto de la página
  // modal.show();   // no modal: deja interactuar con la página
});
modal.addEventListener('close', () => {
  console.log('Respuesta:', modal.returnValue); // "si" o "no"
});

/* El fondo detrás del modal */
dialog::backdrop {
  background: rgb(0 0 0 / .5);
}

details, summary y dialog

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Buena práctica

Antes de programar un acordeón o un modal desde cero con <div> y JavaScript, revisa si <details> o <dialog> resuelven el caso. Te ahorras código y obtienes accesibilidad gratis.

Estructura típica de una página

<body>
  <header>
    <a href="/">Logo</a>
    <nav aria-label="Principal">...</nav>
  </header>

  <main>
    <h1>Título de la página</h1>

    <section aria-labelledby="servicios">
      <h2 id="servicios">Servicios</h2>
      <article>...</article>
      <article>...</article>
    </section>

    <section aria-labelledby="testimonios">
      <h2 id="testimonios">Testimonios</h2>
      ...
    </section>
  </main>

  <aside>Promociones</aside>

  <footer>
    <address>...</address>
  </footer>
</body>

Error común

Poner el <h1> del sitio (el logo) en todas las páginas y dejar el título real como <h2>. El <h1> debe describir esa página: en la página de contacto, "Contacto"; en un artículo, el título del artículo.

Casos de uso reales

• Blog: cada entrada es un <article> con su <header>, <time> y <footer>.
• Tienda: cada tarjeta de producto es un <article>; los filtros van en un <aside>.
• Landing: cada bloque (beneficios, precios, FAQ) es una <section> con su <h2>; la FAQ usa <details>.
• Panel administrativo: <nav> lateral, <main> con el contenido, <dialog> para confirmar acciones.

Ejercicios

1. Convierte esta "sopa de divs" en HTML semántico:

<div class="top">
  <div class="logo">Taller Rápido</div>
  <div class="menu"><a href="/">Inicio</a> <a href="/servicios">Servicios</a></div>
</div>
<div class="contenido">
  <div class="titulo">Servicios</div>
  <div class="servicio"><div class="nombre">Afinación</div><div>Desde $1,200</div></div>
</div>
<div class="bottom">© 2026 Taller Rápido</div>

2. Crea una sección de preguntas frecuentes con tres <details> exclusivos.
3. Marca con <time> la fecha "25 de diciembre de 2026 a las 20:00".

Ver solución

<!-- Ejercicio 1 -->
<header>
  <a href="/" class="logo">Taller Rápido</a>
  <nav aria-label="Principal">
    <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="/servicios" aria-current="page">Servicios</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>Servicios</h1>
  <article>
    <h2>Afinación</h2>
    <p>Desde $1,200</p>
  </article>
</main>
<footer>
  <p><small>&copy; 2026 Taller Rápido</small></p>
</footer>

<!-- Ejercicio 2 -->
<section aria-labelledby="faq">
  <h2 id="faq">Preguntas frecuentes</h2>
  <details name="faq">
    <summary>¿Necesito cita?</summary>
    <p>Recomendamos agendar, pero también atendemos sin cita.</p>
  </details>
  <details name="faq">
    <summary>¿Cuánto tarda una afinación?</summary>
    <p>Entre 2 y 3 horas.</p>
  </details>
  <details name="faq">
    <summary>¿Dan garantía?</summary>
    <p>Sí, 3 meses en mano de obra.</p>
  </details>
</section>

<!-- Ejercicio 3 -->
<time datetime="2026-12-25T20:00">25 de diciembre de 2026 a las 20:00</time>

Resumen

• HTML semántico describe qué es el contenido; mejora accesibilidad, SEO y mantenimiento.
• <header>, <nav>, <main> (uno solo), <footer> estructuran la página.
• <article> para contenido independiente; <section> para bloques temáticos con título; <aside> para lo secundario.
• <div> y <span> solo cuando no exista una etiqueta con significado.
• <time>, <mark> y <address> dan significado al texto.
• <details>/<summary> y <dialog> son acordeones y modales nativos y accesibles.