Docs ejecutables de HTML: HTML semántico

Q: ¿Cuáles son las etiquetas semánticas de HTML?

Las etiquetas de estructura son , , , , , y . Otras etiquetas semánticas habituales son , , , , , y los encabezados de a .

Q: ¿div es un elemento semántico?

No. no tiene significado propio; es una caja genérica para estilos y diseño. Úsalo cuando ninguna etiqueta semántica encaje, y usa , , y las demás cuando alguna encaje.

Q: ¿Cuántos elementos main puede tener una página?

Un visible por página. Envuelve el contenido propio de esa página, y no debe estar dentro de , , , ni .

Qué es el HTML semántico

HTML semántico significa elegir cada etiqueta por lo que es el contenido: la navegación va en <nav>, el contenido principal en <main>, una entrada de blog en <article>. Las etiquetas parecen cajas normales, pero le dicen al navegador, a los lectores de pantalla y a los buscadores qué hace cada parte de la página. Aquí tienes una página completa construida con las etiquetas semánticas de estructura, cada una con su contorno y su nombre:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

Borra el elemento <style> y la página parece texto plano, pero la estructura sigue ahí para quien lee el código, y para el software que lo lee sin mirar los píxeles.

Las etiquetas semánticas de estructura

Etiqueta	Úsala para	Landmark para lectores de pantalla
`<header>`	La introducción de la página o de un artículo: logo, título, autoría	banner (solo cuando no está dentro de `article`, `aside`, `main`, `nav` o `section`)
`<nav>`	Un bloque de enlaces de navegación principales	navigation
`<main>`	El contenido propio de esta página, una vez por página	main
`<article>`	Una pieza independiente que tiene sentido por sí sola: una entrada, un comentario, una tarjeta de producto	ninguno por defecto
`<section>`	Un grupo temático de contenido con su propio encabezado	region, solo cuando tiene un nombre accesible
`<aside>`	Contenido relacionado junto al flujo principal: una barra lateral, una nota	complementary
`<footer>`	La información de cierre de la página o de un artículo: copyright, autor, enlaces	contentinfo (solo a nivel de página)

Cada etiqueta tiene su propia página con más detalle: header, nav, section y footer. Esta página explica cómo encajan entre sí.

Por qué no usar solo div

Una página hecha solo con elementos <div> puede verse idéntica a una semántica. La diferencia está en lo que dice el marcado. Pulsa los botones para resaltar los elementos que tienen significado en cada versión:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

La versión con divs encuentra 0, la versión semántica encuentra 4. Eso es lo que ven las tecnologías de asistencia: en la página semántica, quien usa un lector de pantalla puede saltar directamente a la navegación o al contenido principal, y en la página de divs tiene que leerlo todo. Nombres de clase como class="nav" no significan nada para el navegador.

<div> sigue siendo la opción correcta para cajas que solo existen por estilo o diseño, como el envoltorio flex .cols del primer ejemplo.

main, article y aside

<main> envuelve lo que es propio de esta página y aparece una vez. Dentro, <article> marca contenido que tendría sentido copiado por sí solo en otro sitio, y <aside> marca contenido relacionado que se podría quitar sin romper el artículo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

El artículo tiene su propio <header> y su propio <footer>. No se limitan al nivel de página: cada uno introduce o cierra el article o la section más cercana. El elemento <time datetime> da la fecha en un formato legible por máquinas mientras la muestra en uno legible por personas.

Revisa el esquema de encabezados

Los encabezados son la otra mitad de la estructura. Quienes usan lectores de pantalla suelen recorrer una página de encabezado en encabezado, así que los niveles deben leerse como un índice sin niveles saltados. Este script imprime el esquema de la página en la que se ejecuta:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

El h4 bajo "Brewing" se salta un nivel. Cámbialo por h3 y el esquema se lee limpio. Elige los niveles de encabezado por la estructura y cambia su tamaño con CSS si los quieres más grandes o más pequeños.

Más etiquetas semánticas

La semántica no es solo cuestión de estructura. Estas etiquetas de texto también tienen significado:

Etiqueta	Significado
`<strong>`	Texto importante (en negrita por defecto)
`<em>`	Énfasis (en cursiva por defecto)
`<figure>` y `<figcaption>`	Una imagen, un gráfico o un ejemplo de código con su pie
`<time datetime="...">`	Una fecha u hora en un formato legible por máquinas
`<address>`	Datos de contacto del autor de la página o del artículo
`<mark>`	Texto resaltado, como una coincidencia de búsqueda
`<abbr title="...">`	Una abreviatura con su forma completa
`<button>`	Algo que realiza una acción

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

Pasa el ratón por la abreviatura "W3C" para ver su forma completa en un texto de ayuda.

Errores comunes

Usar una etiqueta por su aspecto. <blockquote> es para citas, no para sangrar; <h3> es para un nivel de encabezado, no para texto en negrita de tamaño medio. Da estilo con CSS.
Envolverlo todo en <section>. Una section debe tener un encabezado y un tema. Si necesitas una caja para dar estilo, usa <div>.
Más de un <main> visible. Deja uno por página, y nunca lo anides dentro de <article>, <aside>, <header>, <nav> ni <footer>.
Meter cada lista de enlaces en <nav>. Resérvalo para los bloques de navegación principales, como el menú del sitio o un índice. Unos pocos enlaces en un pie de página no lo necesitan.
Elementos <div> clicables. Un <div onclick> no se puede alcanzar con el teclado. Usa <button> para acciones y <a href> para navegar.

Preguntas frecuentes

¿Qué es el HTML semántico?

El HTML semántico es un marcado en el que cada etiqueta describe el significado de su contenido: <nav> para la navegación, <article> para una pieza independiente, <button> para un botón. Así el navegador, los lectores de pantalla y los buscadores entienden la página sin tener que adivinar a partir de nombres de clase o estilos.

¿Cuáles son las etiquetas semánticas de HTML?

Las etiquetas de estructura son <header>, <nav>, <main>, <article>, <section>, <aside> y <footer>. Otras etiquetas semánticas habituales son <figure>, <figcaption>, <time>, <address>, <strong>, <em> y los encabezados de <h1> a <h6>.

¿div es un elemento semántico?

No. <div> no tiene significado propio; es una caja genérica para estilos y diseño. Úsalo cuando ninguna etiqueta semántica encaje, y usa <header>, <main>, <nav> y las demás cuando alguna encaje.

¿Para qué sirve la etiqueta aside?

<aside> contiene contenido relacionado con el contenido principal pero que no forma parte de su flujo: una barra lateral, una caja de enlaces relacionados, una nota de glosario o una cita destacada. A nivel de página, los lectores de pantalla la listan como landmark complementario.

¿Cuántos elementos main puede tener una página?

Un <main> visible por página. Envuelve el contenido propio de esa página, y no debe estar dentro de <header>, <nav>, <article>, <aside> ni <footer>.

¿El HTML semántico ayuda al SEO?

Ayuda a los buscadores a entender qué parte de la página es el contenido principal, cuál es la navegación y cómo se relacionan los encabezados. No es un atajo para posicionar por sí solo, pero elimina conjeturas y mejora la accesibilidad, que merece la pena de todos modos.

Conceptos relacionados