HTML semántico

⏱ 30 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Explicar qué es la semántica y por qué importa.
Dividir una página con header, nav, main y footer.
Distinguir entre section, article y aside.
Reconocer cuándo usar div y cuándo una etiqueta con significado.

1.Qué significa «semántico»

Semántica es el significado de las palabras. En HTML, una etiqueta semántica es la que, solo con leer su nombre, te dice qué contenido tiene: <nav> es una navegación, <footer> es un pie, <article> es un artículo.

Hasta ahora has visto etiquetas semánticas sin llamarlas así: <h1>, <p>, <ul>, <table>. En esta lección conoces las que describen las partes grandes de una página.

La alternativa: div y span

<div> (bloque) y <span> (en línea) son contenedores sin significado. Sirven para agrupar cuando ninguna otra etiqueta encaja, pero si todo es <div>, la página es una sopa de cajas que nadie entiende.

Sin semántica vs. con semántica

<!-- Antes: todo son div -->
<div class="encabezado">
  <div class="menu">…</div>
</div>
<div class="contenido">…</div>
<div class="pie">…</div>

<!-- Ahora: cada parte dice qué es -->
<header>
  <nav>…</nav>
</header>
<main>…</main>
<footer>…</footer>

¿Por qué importa? Tres razones concretas:

Accesibilidad: los lectores de pantalla permiten saltar directo a «navegación» o «contenido principal». Con <div> no pueden.
Buscadores: entienden mejor cuál es el contenido importante de tu página.
Mantenimiento: tú (y otras personas) leen el código y saben dónde está cada cosa.

2.Las partes de una página

Casi todas las páginas se dividen en las mismas zonas. HTML tiene una etiqueta para cada una:

Mapa de una página

<header> logo y título del sitio

<nav> Inicio · Cursos · Contacto

<main> contenido principal

<article> una entrada

<section> un tema

<aside> contenido relacionado

<footer> derechos, contacto, enlaces

Etiqueta	Qué contiene	Cuántas veces
`<header>`	Cabecera de la página o de una sección: logo, título, a veces el menú	Puede haber varias
`<nav>`	Enlaces de navegación principales	Una o pocas
`<main>`	El contenido principal y único de la página	Solo una vez
`<section>`	Un apartado temático, normalmente con su título	Muchas
`<article>`	Contenido que tiene sentido por sí solo: noticia, entrada de blog, tarjeta de producto	Muchas
`<aside>`	Contenido relacionado pero secundario: barra lateral, anuncios, datos curiosos	Varias
`<footer>`	Pie de la página o de una sección: autoría, contacto, enlaces legales	Puede haber varios

⚠️ Importante · Un solo <main>

La página debe tener un único <main>, y no puede estar dentro de <header>, <nav>, <footer>, <article> ni <aside>. Es el punto al que un lector de pantalla salta para llegar directo al contenido.

3.Practica en vivo: de div a semántico

Esta página está hecha con <div>. Reemplaza cada <div> por la etiqueta semántica que corresponda y comprueba que el resultado se vea igual.

✏️ Cambia los div por etiquetas semánticas

Código (edítalo)

<style>
  body > * { border: 2px dashed #4f46e5; margin: 6px 0; padding: 6px; }
</style>
<div>Logo y título del sitio</div>
<div>Inicio · Cursos · Contacto</div>
<div>
  <h1>Bienvenida</h1>
  <p>Este es el contenido principal.</p>
</div>
<div>Aviso de derechos reservados</div>

Resultado

Respuesta: header, nav, main y footer. Si ves que el recuadro de cada zona se conserva al cambiar la etiqueta, lo hiciste bien: la apariencia no cambia, pero el significado sí.

4.Section, article y aside

Son las que más confunden. Una forma de decidir:

Pregunta	Etiqueta
¿Podría publicarse por sí solo (en un lector de noticias, en otra web) y seguir teniendo sentido?	`<article>`
¿Es un apartado temático de la página, que normalmente lleva un título (`h2`)?	`<section>`
¿Es contenido relacionado pero no esencial, que podrías quitar sin perder el hilo?	`<aside>`
¿Solo necesitas agrupar para dar estilo y nada de lo anterior aplica?	`<div>`

Un blog sencillo

<main>
  <h1>Mi blog de viajes</h1>

  <article>
    <h2>Tres días en Oaxaca</h2>
    <p>Publicado el <time datetime="2026-09-14">14 de septiembre de 2026</time></p>
    <p>Llegamos por la mañana…</p>
  </article>

  <article>
    <h2>Guía rápida de Lisboa</h2>
    <p>Lo primero que debes saber…</p>
  </article>

  <aside>
    <h2>Dato curioso</h2>
    <p>Oaxaca tiene siete moles tradicionales.</p>
  </aside>
</main>

📌 Nota · <time>

La etiqueta <time> marca fechas y horas. El atributo datetime guarda la fecha en formato universal (año-mes-día) para que las máquinas la entiendan, aunque el texto visible esté escrito de otra forma.

💡 Consejo · Cada section y article debería tener un título

Si no encuentras un buen título para una <section>, probablemente deberías usar un <div>.

5.Más etiquetas con significado

Etiqueta	Para qué sirve	Ejemplo
`<figure>` y `<figcaption>`	Imagen, gráfico o código con su leyenda	Ya la usaste en la lección 3
`<time>`	Fechas y horas	`<time datetime="2026-10-06">6 de octubre</time>`
`<address>`	Datos de contacto de la persona o entidad autora	`<address>hola@ejemplo.com</address>`
`<blockquote>`	Cita larga de otra fuente	Con `cite="url"` para indicar el origen
`<q>`	Cita corta dentro de un párrafo	Pone comillas automáticamente
`<abbr>`	Abreviatura con su significado	`<abbr title="HyperText Markup Language">HTML</abbr>`
`<mark>`	Texto resaltado por relevancia	Resultados de búsqueda
`<details>` y `<summary>`	Contenido que se despliega al hacer clic	Preguntas frecuentes

✏️ Pruébalas

Código (edítalo)

<blockquote cite="https://es.wikipedia.org/wiki/HTML">
  HTML es el lenguaje de marcado estándar para páginas web.
</blockquote>
<p>El <abbr title="World Wide Web Consortium">W3C</abbr> define el estándar.</p>
<p>Como dijo alguien: <q>la web es para todos</q>.</p>
<details>
  <summary>¿Qué es HTML?</summary>
  <p>Es el lenguaje que estructura el contenido de una página.</p>
</details>
<address>Escríbeme a hola@ejemplo.com</address>

Resultado

Observa que <details> ya funciona sin escribir nada de JavaScript. Todas las lecciones de este curso usan esa etiqueta en las pistas y soluciones de los ejercicios.

6.Una página completa y semántica

Juntando todo, este es el esqueleto que puedes usar como base para casi cualquier sitio:

Plantilla semántica

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nombre del sitio</title>
  </head>
  <body>
    <header>
      <h1>Nombre del sitio</h1>
      <nav aria-label="Principal">
        <ul>
          <li><a href="index.html">Inicio</a></li>
          <li><a href="cursos.html">Cursos</a></li>
          <li><a href="contacto.html">Contacto</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section>
        <h2>Bienvenida</h2>
        <p>Texto de presentación.</p>
      </section>
      <section>
        <h2>Novedades</h2>
        <article>
          <h3>Primera noticia</h3>
          <p>Resumen…</p>
        </article>
      </section>
    </main>

    <footer>
      <p>© 2026 Nombre del sitio</p>
    </footer>
  </body>
</html>

🔍 Ejemplo · El menú es una lista dentro de nav

Fíjate en que el menú combina lo que ya aprendiste: un <nav> que contiene una lista <ul> de enlaces <a>. Con CSS lo convertirás en una barra horizontal.

📌 Nota · aria-label

aria-label="Principal" da un nombre a la navegación. Es útil cuando hay más de un <nav> (por ejemplo, uno principal y otro en el pie) para que se distingan al navegar con lector de pantalla.

7.Errores frecuentes

Más de un <main> en la página.
Usar <section> como sustituto de <div> para cualquier agrupación.
Usar etiquetas por su apariencia (por ejemplo, <header> solo para agrandar texto): el significado es lo que cuenta.
Saltarse niveles de título dentro de las secciones, o usar varios <h1>.
Poner todo el menú en <div> en lugar de <nav> con una lista.
Olvidar lang en la etiqueta <html>.

📒 Apuntes para llevar

Las etiquetas semánticas describen qué es el contenido, no cómo se ve.
<header>, <nav>, <main>, <aside> y <footer> dividen la página en zonas.
<main> aparece una sola vez y contiene el contenido principal.
<article> es contenido independiente; <section> es un apartado temático con título.
<aside> es contenido relacionado pero secundario.
<div> y <span> son contenedores sin significado: úsalos solo cuando nada más encaje.
<time>, <address>, <blockquote>, <abbr> y <details> añaden significado a detalles concretos.
La semántica mejora la accesibilidad, el posicionamiento en buscadores y el mantenimiento del código.

8.Glosario

Término	Significado
Semántica	El significado que transmite una etiqueta sobre su contenido.
Landmark (punto de referencia)	Zona de la página que un lector de pantalla puede saltar directamente: `header`, `nav`, `main`, `footer`.
`div`	Contenedor de bloque sin significado.
`span`	Contenedor en línea sin significado.
`article`	Contenido autónomo que podría publicarse por separado.
`aside`	Contenido tangencial o complementario.
ARIA	Conjunto de atributos (como `aria-label`) que mejoran la accesibilidad.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Cuántas veces puede aparecer <main> en una página?

<main> marca el contenido principal y único de la página.

¿Cuál etiqueta usarías para el menú de navegación?

<nav> indica navegación; así los lectores de pantalla permiten saltar directo a ella.

Una noticia que tiene sentido por sí sola, aunque se copie a otra web, va en…

<article> es para contenido independiente y reutilizable.

¿Por qué es mejor <header> que <div class="encabezado">?

La apariencia puede ser idéntica, pero <header> comunica qué es el contenido.

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio