HTML semántico

Semántico significa “que tiene significado”. Escribir HTML semántico es elegir cada etiqueta por lo que es el contenido, no por cómo se ve. En esta lección verás las etiquetas de estructura de una página, cómo decidir entre <article>, <section> y <div>, otras etiquetas con significado como <time>, <figure> o <mark>, y cómo organizar los encabezados para que la página tenga un índice lógico.

Compara estas dos versiones de la misma cabecera:

<!-- Sin semántica: todo son div -->
<div class="cabecera">
  <div class="menu">...</div>
</div>

<!-- Semántico -->
<header>
  <nav>...</nav>
</header>

En el navegador se ven igual. Pero la segunda le dice a Google y a los lectores de pantalla qué es cada parte.

Por qué importa

• Accesibilidad. Los lectores de pantalla permiten saltar directamente al <main> o al <nav>. Con divs no pueden.
• SEO. Los buscadores entienden mejor qué contenido es el importante.
• Código más fácil de leer. Un </article> te dice más que el quinto </div> seguido.

También hay ventajas menos evidentes: el modo lectura de los navegadores usa <article> y <main> para quedarse con el contenido y quitar menús y publicidad, y los asistentes de voz y las herramientas de traducción funcionan mejor cuando entienden la estructura.

Las etiquetas de estructura

Etiqueta	Qué contiene
<header>	La cabecera: logo, título, a veces el menú
<nav>	Un bloque de enlaces de navegación
<main>	El contenido principal. Solo uno por página
<article>	Contenido que tiene sentido por sí solo: un post, una noticia, un producto
<section>	Una sección temática, normalmente con su propio título
<aside>	Contenido secundario: barra lateral, notas, publicidad
<footer>	El pie: copyright, contacto, enlaces legales

Una página típica queda así:

<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <h1>Título del artículo</h1>
      <section>
        <h2>Primera parte</h2>
        ...
      </section>
    </article>
    <aside>...</aside>
  </main>

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

<main>: el contenido principal

<main> envuelve lo que es único de esta página: lo que cambia de una página a otra. La cabecera, el menú y el pie, que se repiten en toda la web, van fuera.

• Solo puede haber un <main> visible por página.
• No puede ir dentro de <article>, <aside>, <header>, <footer> ni <nav>.

Es el destino ideal de un enlace de salto: <a href="#contenido">Saltar al contenido</a> y <main id="contenido">.

<nav>: solo la navegación importante

No todo grupo de enlaces es un <nav>. Úsalo para los bloques de navegación principales: el menú, el índice de un artículo largo, las migas de pan, la paginación. Los tres enlaces legales del pie no suelen necesitarlo.

Si hay varios <nav>, dale a cada uno un nombre para distinguirlos: <nav aria-label="Principal"> y <nav aria-label="Índice del artículo">.

<aside>: lo que se podría quitar

<aside> contiene contenido relacionado pero secundario: si lo quitaras, lo principal seguiría entendiéndose. Ejemplos: una barra lateral con artículos relacionados, un recuadro con “¿Sabías que…?” dentro de un artículo o la biografía del autor.

<article> o <section>

Es la duda más frecuente. Hazte esta pregunta: ¿tendría sentido este bloque publicado solo, fuera de esta página?

• Sí → <article>. Un post del blog, una noticia, un comentario, la tarjeta de un producto, una receta. Podrías enviarlo por RSS o compartirlo tal cual.
• No, pero es un apartado temático con título → <section>. Los capítulos de un artículo, las partes de una portada (“Servicios”, “Opiniones”, “Contacto”).
• No, y solo lo necesito para dar estilo → <div>.

<main>
  <section>
    <h2>Últimas noticias</h2>
    <article>
      <h3>El club inaugura rocódromo</h3>
      <p>...</p>
    </article>
    <article>
      <h3>Abiertas las inscripciones</h3>
      <p>...</p>
    </article>
  </section>
</main>

Pueden anidarse en los dos sentidos: una <section> puede contener artículos (como arriba), y un <article> puede dividirse en secciones. Los comentarios de un post son <article> dentro del <article> del post.

Consejo: una <section> casi siempre debe tener un encabezado (<h2>, <h3>…). Si no se te ocurre qué título ponerle, probablemente sea un <div>.

<header> y <footer> dentro de un artículo

<header> y <footer> no son solo la cabecera y el pie de la página. También puede tenerlos cada <article> o <section>:

<article>
  <header>
    <h2>Diez ejercicios para la espalda</h2>
    <p>Por <a href="/autores/marta/">Marta Ruiz</a> · <time datetime="2026-09-12">12 de septiembre de 2026</time></p>
  </header>

  <p>Pasar ocho horas sentado pasa factura...</p>

  <footer>
    <p>Etiquetas: <a href="/tag/salud/">salud</a>, <a href="/tag/gimnasio/">gimnasio</a></p>
  </footer>
</article>

La cabecera del artículo tiene el título, el autor y la fecha; el pie, las etiquetas o los enlaces para compartir.

Otras etiquetas con significado

• <time datetime="2026-09-30">30 de septiembre</time>: una fecha que las máquinas pueden leer.
• <address>: datos de contacto.
• <figure> y <figcaption>: una imagen o gráfico con su pie.
• <button> para acciones y <a> para ir a otra página. Nunca un <div> con un clic de JavaScript: no se puede usar con el teclado.

<time> en detalle

El texto de <time> es para las personas; el atributo datetime, para las máquinas (buscadores, calendarios, lectores de pantalla). Admite varios formatos:

Contenido	datetime
Una fecha	2026-09-30
Una hora	18:30
Fecha y hora	2026-09-30T18:30
Con zona horaria	2026-09-30T18:30+02:00
Un mes	2026-09
Una duración de 1 h 30 min	PT1H30M

<p>La clase de spinning empieza a las <time datetime="18:30">seis y media</time>
y dura <time datetime="PT45M">45 minutos</time>.</p>

<address>: contacto de quien publica

<address> es para la información de contacto del autor o la organización de la página o del artículo que lo contiene. No sirve para cualquier dirección postal que aparezca en el texto:

<footer>
  <address>
    Biblioteca Municipal · Plaza Mayor 1, Soria ·
    <a href="mailto:biblioteca@ejemplo.com">biblioteca@ejemplo.com</a>
  </address>
</footer>

Si en una noticia mencionas “el robo ocurrió en la calle Mayor 5”, eso es texto normal, no un <address>.

<figure> y <figcaption>

<figure> agrupa un contenido autónomo que se referencia desde el texto: una imagen, un gráfico, un fragmento de código, una tabla o una cita. <figcaption> es su pie o título:

<figure>
  <pre><code>console.log('Hola, mundo');</code></pre>
  <figcaption>Figura 2. El primer programa en JavaScript.</figcaption>
</figure>

<mark>: resaltar lo relevante

<mark> resalta un texto por su relevancia en un contexto, como un subrayador. El caso típico: marcar los términos que coinciden con una búsqueda.

<p>Resultados para "yoga": clases de <mark>yoga</mark> para principiantes los martes.</p>

No lo confundas con <strong> (importancia) ni con <em> (énfasis al leer), que viste en textos en HTML.

La jerarquía de encabezados

Los encabezados <h1> a <h6> forman el índice (el outline) de la página. Los lectores de pantalla permiten saltar de encabezado en encabezado, y los buscadores los usan para entender de qué trata cada parte.

h1 Club de escalada Vertical
   h2 Próximas salidas
      h3 La Pedriza
      h3 Ojo Guareña
   h2 Cursos
      h3 Iniciación
      h3 Perfeccionamiento
   h2 Contacto

Reglas prácticas:

• Un único <h1> por página, con su tema principal.
• No te saltes niveles al bajar: de <h2> a <h3>, no a <h4>. Al subir sí puedes volver a cualquier nivel.
• El nivel lo decide la estructura, no el tamaño: si quieres un <h2> más pequeño, cámbialo con CSS.

Cuidado: hace años se propuso que cada <section> o <article> “reiniciara” los niveles, de forma que pudieras usar <h1> en todas partes. Ningún navegador ni lector de pantalla llegó a implementarlo. Usa siempre los niveles reales (h2, h3…) según la profundidad.

¿Entonces ya no uso <div>?

Sí, pero solo cuando ninguna otra etiqueta encaja. <div> es una caja sin significado, perfecta para agrupar cosas y darles estilo con CSS. La regla es: primero busca una etiqueta semántica; si no hay ninguna, usa <div>.

Un ejemplo claro: para poner tres tarjetas en fila con CSS Grid necesitas un contenedor. Ese contenedor no tiene significado propio, así que es un <div class="rejilla">. Las tarjetas de dentro, en cambio, probablemente sean <article>.

Errores frecuentes

• Varios <main> visibles o un <main> dentro de un <article>.
• Usar <section> como sustituto de <div> solo para dar estilos.
• Secciones sin encabezado.
• Un <nav> para cada grupo de enlaces, hasta en el pie.
• <address> para cualquier dirección que aparezca en el texto.
• Elegir el encabezado por su tamaño o saltar de <h1> a <h4>.
• Usar <mark> o <strong> para cambiar el aspecto. Si solo quieres otro color, usa CSS.

Resumen

Etiqueta	Úsala para
<header> / <footer>	Cabecera y pie de la página o de un artículo
<nav>	Bloques de navegación importantes
<main>	El contenido único de la página (uno solo)
<article>	Contenido que tiene sentido por sí solo
<section>	Un apartado temático con encabezado
<aside>	Contenido secundario relacionado
<time>	Fechas, horas y duraciones con datetime
<address>	Contacto del autor o la organización
<figure> + <figcaption>	Imagen, gráfico, código o tabla con su pie
<mark>	Texto resaltado por relevancia
<div>	Agrupar sin significado, cuando nada más encaja

La semántica es la base de la accesibilidad. Continúa con accesibilidad web para ver cómo sacarle todo el partido.