HTML semántico - estructura con significado - HTML desde Cero

Qué es HTML semántico?

HTML semántico significa elegir las etiquetas que describen el significado del contenido, no solo su apariencia. Un <div> no dice nada sobre lo que contiene, pero un <nav> dice claramente "esto es navegación" y un <article> dice "esto es contenido independiente".

Comparemos estas dos formas de escribir lo mismo:

<!-- Sin semántica (solo divs) -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Inicio</a></div>
  </div>
</div>
<div class="content">
  <div class="post">
    <div class="post-title">Mi articulo</div>
    <div class="post-body">Contenido aquí...</div>
  </div>
</div>

<!-- Con semántica -->
<header>
  <nav aria-label="Principal">
    <a href="/">Inicio</a>
  </nav>
</header>
<main>
  <article>
    <h1>Mi articulo</h1>
    <p>Contenido aquí...</p>
  </article>
</main>

Ambos pueden verse identicos con CSS, pero la versión semántica comunica estructura y propósito a navegadores, lectores de pantalla y motores de busqueda.

Por qué importa?

1. Accesibilidad

Los lectores de pantalla (como NVDA o VoiceOver) crean un "mapa" de la página usando los elementos semanticos. Un usuario ciego puede saltar directamente al <main>, navegar entre <article> o listar todas las <nav> de la página.

2. SEO

Google interpreta la estructura semántica para entender la jerarquia y relevancia del contenido. Un <h1> dentro de un <article> tiene más peso que texto dentro de un <div> genérico.

3. Mantenibilidad

Leer <header> y <aside> es mucho más claro que leer <div class="header"> y <div class="sidebar">. El código se documenta a si mismo.

Elementos semanticos de estructura

Representa contenido introductorio. Puede ser el encabezado de la página o de una sección:

<!-- Encabezado de página -->
<header>
  <h1>Nombre del sitio</h1>
  <nav>...</nav>
</header>

<!-- Encabezado de articulo -->
<article>
  <header>
    <h2>Título del post</h2>
    <time datetime="2025-06-15">15 junio 2025</time>
  </header>
</article>

main

El contenido principal de la página. Solo debe haber un <main> por página y no debe estar anidado dentro de <article>, <aside>, <header>, <footer> o <nav>:

<body>
  <header>...</header>
  <main>
    <!-- Todo el contenido principal aquí -->
  </main>
  <footer>...</footer>
</body>

article

Contenido que tiene sentido por si solo, independiente del resto de la página. Ejemplos: un post de blog, un comentario, un producto, una tarjeta de noticia:

<article>
  <h2>Como aprender HTML</h2>
  <p>HTML es el lenguaje base de la web...</p>
</article>

section

Agrupa contenido tematico relacionado. A diferencia de <article>, una <section> generalmente no tiene sentido fuera de su contexto:

<article>
  <h1>Guia de HTML</h1>
  <section>
    <h2>Capítulo 1: Introducción</h2>
    <p>...</p>
  </section>
  <section>
    <h2>Capítulo 2: Elementos básicos</h2>
    <p>...</p>
  </section>
</article>

aside

Contenido tangencialmente relacionado con el contenido principal. Tipicamente barras laterales, citas destacadas o bloques de información complementaria:

<aside aria-label="Datos curiosos">
  <h3>Sabías que...</h3>
  <p>HTML fue creado por Tim Berners-Lee en 1991.</p>
</aside>

Pie de página o de sección. Contiene información como copyright, enlaces legales o datos de contacto:

<footer>
  <p>&copy; 2025 Mi Empresa</p>
  <nav aria-label="Enlaces legales">
    <a href="/privacidad">Privacidad</a>
    <a href="/términos">Terminos</a>
  </nav>
</footer>

Elementos semanticos de texto

Ademas de los elementos de estructura, HTML ofrece elementos semanticos para texto:

Elemento	Significado
`<time>`	Fecha u hora legible por maquinas
`<address>`	Informacion de contacto
`<mark>`	Texto resaltado o relevante
`<abbr>`	Abreviatura con título expandido
`<cite>`	Título de una obra citada
`<blockquote>`	Cita extensa de otra fuente
`<details>`	Contenido desplegable
`<summary>`	Resumen visible del details

Ejemplo con time

<p>Publicado el <time datetime="2025-03-15T10:30:00">15 de marzo de 2025</time></p>

El atributo datetime proporciona el valor legible por maquinas, mientras que el texto visible puede tener cualquier formato.

Reglas de oro del HTML semántico

Un solo <h1> por página y encabezados en orden jerarquico
Un solo <main> por página para el contenido principal
Usa <nav> solo para bloques de navegación importantes, no para cualquier grupo de enlaces
No uses elementos semanticos solo por su estilo visual — un <blockquote> no es para indentar texto, es para citas reales
Cuando dudes entre <div> y un elemento semántico, preguntate si el contenido tiene un rol específico

Práctica

Refactoriza una página con divs: Toma una página donde todo esté hecho con <div> y reescríbela usando <header>, <nav>, <main>, <article>, <section>, <aside> y <footer> segun corresponda.
Crea una página de blog: Construye la estructura de un post de blog usando <article> con su <header> (titulo, <time> con datetime) y al menos dos <section> para diferentes partes del contenido.
Agrega elementos semanticos de texto: Anade un <details> con <summary>, una <blockquote> con <cite>, y un <abbr> con su atributo title expandido en tu página.

En la siguiente leccion aprenderemos los fundamentos de accesibilidad web con HTML.