HTML Semántico — WebForge

¿Qué es HTML semántico?

HTML semántico es la práctica de usar las etiquetas HTML según su propósito y significado, no solo por cómo se ven. La diferencia clave está entre describir qué es un elemento (<nav> es una barra de navegación) versus describir cómo se ve (<div class="nav"> es un contenedor con una clase inventada). Ambos pueden verse igual en pantalla, pero el primero le dice a la máquina exactamente qué es, mientras que el segundo es opaco y requiere interpretación humana.

Piensa en las etiquetas semánticas como las secciones de un periódico: un editor sabe dónde está el titular, dónde empieza el artículo principal, dónde van los anuncios laterales y dónde está el índice. No necesita leer todo para entender la estructura porque las convenciones visuales se lo comunican al instante. HTML semántico hace exactamente lo mismo para el código fuente de tu página.

Los beneficios son concretos y medibles: mejora tu SEO porque Google entiende mejor tu contenido y puede rankearlo con mayor precisión, mejora la accesibilidad porque los lectores de pantalla pueden saltar entre secciones, y mejora la mantenibilidad porque cualquier desarrollador que lea tu código entiende la estructura sin adivinar qué hace cada <div>.

Regla de oro

Si podés reemplazar un <div> o un <span> por una etiqueta con significado, hacelo. Pregúntate: "¿Qué es este contenido?" Si la respuesta es "una navegación", usa <nav>. Si es "el contenido principal", usa <main>. Si es "un artículo independiente", usa <article>. Solo usa <div> cuando el elemento no tiene un significado específico (un wrapper para estilos, por ejemplo).

Estructura de un documento semántico

Las etiquetas <header>, <nav>, <main> y <footer> son los pilares de la estructura semántica. Juntas forman el "esqueleto" de cualquier página web bien construida. Cada una tiene un rol específico que va más allá del CSS: los navegadores y las tecnologías asistivas las reconocen automáticamente y las tratan de manera especial.

Un punto importante: <header> y <footer> pueden usarse más de una vez en una página. No son exclusivos del nivel superior del documento. Un <article> puede tener su propio <header> y <footer>, igual que un <section>. Lo que sí es único es <main>: solo puede haber uno por página, y contiene el contenido que es único e irrepetible de esa página (no debe incluir header global, footer global ni sidebar).

HTML

<!-- Estructura semantica de una pagina -->
<body>

    <!-- Header global (logo, nav, buscador) -->
    <header>
        <nav aria-label="Navegacion principal">
            <!-- Links de navegacion -->
        </nav>
    </header>

    <!-- Contenido PRINCIPAL (solo uno por pagina) -->
    <main>
        <!-- Secciones, articulos, etc. -->
    </main>

    <!-- Footer global (creditos, links, copyright) -->
    <footer>
        <p>&copy; 2026 Mi Sitio Web</p>
    </footer>

</body>

<header>

La etiqueta <header> representa la cabecera introductoria de una sección o de la página completa. Generalmente contiene un grupo de elementos introductorios o de navegación: logotipos, títulos (<h1>-<h6>), menús de navegación, formularios de búsqueda, o cualquier contenido que prepare al usuario para lo que viene. Es uno de los elementos semánticos más fáciles de adoptar porque prácticamente todo sitio web tiene algún tipo de cabecera.

<nav>

<nav> envuelve bloques de enlaces de navegación. No todos los grupos de links deben estar dentro de un <nav>; solo los bloques de navegación mayores. Por ejemplo: el menú principal del sitio, un mapa del sitio, o la navegación entre páginas. Los links del footer o links contextuales dentro de un párrafo no necesitan estar en un <nav>. Usar aria-label en cada <nav> ayuda a los lectores de pantalla a distinguir entre múltiples bloques de navegación.

<main>

<main> contiene el contenido central y único de la página. Es la etiqueta más importante para SEO porque le dice a Google: "esto es lo que el usuario viene a buscar". Debe ser único: solo un <main> por página. No debe incluir contenido que se repite en todas las páginas como el header global, sidebar, footer, ni cuadros de búsqueda. Los lectores de pantalla pueden saltar directamente al <main> con un atajo de teclado, ahorrándole al usuario tener que navegar todo el header y menúes cada vez que carga una página.

<footer>

<footer> representa el pie de su sección más cercana o del cuerpo del documento. Típicamente contiene información sobre el autor, copyright, enlaces a políticas de privacidad, términos, contacto, o enlaces relacionados. Al igual que <header>, puede aparecer múltiples veces: el footer global de la página y los footers individuales dentro de artículos o secciones, donde suelen contener metadatos como fecha de publicación, tags, o nombre del autor.

¿Dónde NO usar <main>?

El <main> no debe estar dentro de un <article>, <aside>, <header> ni <footer>. Es un elemento de nivel superior del documento. Si necesitas contener un artículo, pon el <article> dentro del <main>, no al revés.

<article>, <section> y <aside>

Estas tres etiquetas son las que más confusión generan, especialmente la diferencia entre <article> y <section>. La clave está en hacerse la pregunta correcta: "¿Este contenido tendría sentido por sí solo si lo copio y lo pego en otro contexto?". Si la respuesta es sí, es un <article>. Si la respuesta es no, probablemente es una <section>.

<article> — Contenido independiente

<article> representa una unidad de contenido que es independiente y autónoma. Esto significa que si sacas el article de la página y lo pones en otra, aún tendría sentido completo. Ejemplos clásicos: una publicación de blog, un comentario de usuario, una noticia, una tarjeta de producto, un widget de clima, un post de foro. La prueba del "sindicado" es útil: si podés tomar este contenido y publicarlo en un feed RSS o en otra página sin que pierda contexto, es un article.

<section> — Agrupación temática

<section> es una agrupación genérica de contenido por tema o propósito. A diferencia de <article>, su contenido no necesariamente tiene sentido fuera de su contexto. Es más like un "capítulo" dentro de la página. Cada <section> debería tener típicamente un heading (<h2>-<h6>) que identifique su tema. Si no necesitas un heading, probablemente no necesitas un <section> y un <div> sería más apropiado.

<aside> — Contenido complementario

<aside> contiene contenido que está relacionado tangencialmente con el contenido principal, pero que no es esencial para entenderlo. Ejemplos: barras laterales con links relacionados, publicidad, callouts de tips, biografías del autor, widgets de "artículos populares", o cualquier contenido que complementa pero cuya ausencia no rompería la página. En un layout de blog clásico, el <aside> es la columna lateral con contenido adicional.

HTML

<main>
    <!-- Cada post es un article independiente -->
    <article>
        <header>
            <h2>Aprende Flexbox en 10 minutos</h2>
            <time datetime="2026-06-10">10 de junio, 2026</time>
        </header>
        <p>Flexbox es el sistema de layout moderno...</p>
        <footer>
            <p>Por <a href="#">Juan Pérez</a></p>
        </footer>
    </article>

    <!-- Una seccion tematica dentro de la pagina -->
    <section>
        <h2>Recursos recomendados</h2>
        <p>Lista de sitios y herramientas...</p>
    </section>

    <!-- Contenido complementario -->
    <aside>
        <h3>Artículos populares</h3>
        <ul>
            <li><a href="#">CSS Grid vs Flexbox</a></li>
            <li><a href="#">JavaScript moderno</a></li>
        </ul>
    </aside>
</main>

<article>

Contenido independiente y autónomo. Tiene sentido por sí solo fuera de la página. Ej: post de blog, noticia, comentario, tarjeta de producto.

<section>

Agrupación temática de contenido. Necesita contexto para tener sentido. Siempre debería tener un heading. Ej: sección de características, about.

<aside>

Contenido complementario relacionado tangencialmente. Su ausencia no rompe la página. Ej: sidebar, ads, biografía del autor.

No anides article dentro de section innecesariamente

Un error común es envolver cada <article> en un <section>. Si la sección solo contiene un artículo, el <section> es redundante. Usa <section> cuando agrupas múltiples elementos relacionados (varios artículos, varios párrafos con un heading), no como wrapper genérico.

<figure> y <figcaption>

<figure> representa contenido autocontenido (imágenes, diagramas, código, citas) que se referencia desde el flujo principal del documento, junto con su leyenda opcional <figcaption>. La ventaja semántica es que el navegador entiende que el contenido de la figure y su caption están relacionados y los trata como una unidad. Esto mejora la accesibilidad porque los lectores de pantalla anuncian la figure como un objeto con su descripción.

Un detalle importante: <figure> no es solo para imágenes. Puedes envolver bloques de código, citas textuales, tablas, audio o cualquier contenido que necesite una leyenda descriptiva. La <figcaption> puede ir al inicio o al final de la <figure>, aunque por convención se suele poner al final.

HTML

<!-- Imagen con caption -->
<figure>
    <img src="layout-responsive.png"
         alt="Diagrama de un layout responsive con sidebar colapsable">
    <figcaption>
        Figura 1: Layout responsive con breakpoints en 768px y 1024px
    </figcaption>
</figure>

<!-- Bloque de codigo como figure -->
<figure>
    <pre><code>const saludar = nombre => `Hola ${nombre}!`;</code></pre>
    <figcaption>Ejemplo de arrow function con template literal</figcaption>
</figure>

<!-- Cita con fuente -->
<figure>
    <blockquote>
        <p>"La simplicidad es la sofisticación."</p>
    </blockquote>
    <figcaption>— Leonardo da Vinci</figcaption>
</figure>

No necesitas CSS para figure

Por defecto, <figure> no aplica ningún estilo especial. La mayoría de navegadores la muestran como un <div> normal. Tu tarea con CSS es darle el espaciado y estilo que necesite, pero la etiqueta ya está haciendo su trabajo semántico internamente.

<details> y <summary>

<details> crea un widget de "acordeón" nativo del navegador sin necesidad de JavaScript. Contiene un <summary> visible que actúa como botón para mostrar u ocultar el contenido restante. Es la solución más simple y accesible para contenido colapsable: no necesita JS, funciona sin CSS, es accesible por defecto (los lectores de pantalla lo anuncian como un elemento expandible), y el navegador le da estilos base que podés personalizar.

Soporte de navegadores: <details> tiene soporte completo en todos los navegadores modernos desde 2018. No necesitas polyfills. Algunos usos típicos: FAQ (preguntas frecuentes), glosarios, contenido adicional opcional, configuraciones avanzadas, o cualquier información que el usuario puede querer ver pero que no necesita estar siempre visible. El atributo open permite que empiece expandido.

HTML

<!-- FAQ basico -->
<details>
    <summary>¿Qué es HTML semántico?</summary>
    <p>HTML semántico es usar etiquetas que describen
       el significado del contenido, no solo su apariencia.</p>
</details>

<!-- Empieza abierto -->
<details open>
    <summary>Requisitos previos</summary>
    <p>Necesitas saber HTML básico y tener un editor de
       código como VS Code.</p>
</details>

<!-- Con contenido rico dentro -->
<details>
    <summary>Ejemplo de código</summary>
    <pre><code><nav aria-label="Principal">...</nav></code></pre>
    <p>Siempre agrega un aria-label cuando tienes
       múltiples nav en una página.</p>
</details>

details no reemplaza al modal

<details> es excelente para acordeones y FAQs, pero no es un reemplazo para modales o diálogos. Para ventanas modales usa <dialog> con el método .showModal(), que provee behaviours como trapping de focus, cierre con Escape y backdrop. Cada elemento tiene su propósito.

Etiquetas de texto semántico

Además de las etiquetas estructurales, HTML ofrece etiquetas de texto semántico que agregan significado específico a porciones de contenido inline. Estas parecen simples, pero marcan la diferencia en la calidad de tu HTML. Cada una le dice a la máquina algo distinto sobre el texto que contiene.

<time> — Fechas y horas

<time> representa un punto específico en el tiempo o un rango de tiempo. El atributo datetime contiene la fecha/hora en formato legible por máquinas (ISO 8601), mientras que el contenido visible puede ser cualquier formato amigable. Los motores de busqueda, lectores de pantalla y calendarios pueden extraer la fecha del datetime para ofrecer funcionalidades como "agregar al calendario" o "hace cuánto tiempo".

<mark> — Texto destacado

<mark> resalta texto que es relevante en el contexto actual. Visualmente se renderiza con un fondo amarillo (como un marcador fluorescente). Se usa para resultados de búsqueda (resaltar el término buscado), texto recién agregado, o cualquier porción que quieras destacar. No lo confundas con <strong>: <strong> indica importancia, <mark> indica relevancia contextual.

<abbr> — Abreviaturas

<abbr> envuelve una abreviatura o acrónimo y usa el atributo title para proporcionar su significado completo. Cuando el usuario pasa el mouse sobre la abreviatura, el navegador muestra un tooltip con el texto del title. Los lectores de pantalla pueden anunciar el texto completo en lugar de deletrear la abreviatura. Es una etiqueta subestimada pero muy útil para la accesibilidad.

<blockquote>, <cite>, <q> — Citas

<blockquote> es para citas largas (a nivel de bloque, con su propio párrafo). <q> es para citas cortas inline (dentro de un párrafo). <cite> identifica la fuente de una cita, no solo con blockquotes sino támbién para títulos de obras, artículos, películas o cualquier referencia creativa. El navegador suele renderizar <cite> en cursiva por defecto.

HTML

<!-- time: formato legible + machine-readable -->
<p>Publicado el
    <time datetime="2026-06-10">10 de junio de 2026</time>.
</p>

<!-- time con hora exacta -->
<time datetime="2026-06-10T19:30">Hoy a las 19:30</time>

<!-- mark: resaltar texto relevante -->
<p>Los resultados muestran que
    <mark>CSS Grid</mark> tiene mejor soporte que
    las tablas para layouts.</p>

<!-- abbr: abreviatura con significado -->
<p>Usamos <abbr title="Cascading Style Sheets">CSS</abbr>
   para los estilos de la página.</p>

<!-- blockquote con cite -->
<blockquote cite="https://www.w3.org/TR/html5/">
    <p>"HTML5 define una serie de elementos que
       proveen significado semántico."</p>
</blockquote>
<p>— <cite>W3C, HTML5 Specification</cite></p>

<!-- q: cita inline corta -->
<p>Como dijo <cite>Tim Berners-Lee</cite>,
    <q>El poder de la web está en su
    universalidad.</q></p>

Etiqueta	Significado	Diferencia clave
`<mark>`	Relevancia contextual	Resalta por contexto (ej: resultado de búsqueda)
`<strong>`	Importancia	Indica que el contenido es importante, serio o urgente
`<em>`	Énfasis	Cambia el tono (pronunciación en lectores de pantalla)
`<b>`	Atención visual	Solo estético (sin significado semántico, evitar)
`<i>`	Voz alternativa	Términos técnicos, thoughts, texto en otro idioma

¿Por qué importa?

Usar HTML semántico no es solo una "buena práctica" abstracta. Tiene un impacto real y medible en tres áreas fundamentales de cualquier proyecto web: cómo te encuentran los motores de búsqueda, cómo usan tu página personas con discapacidades, y cómo fácil es para otros desarrolladores (o tu yo del futuro) entender tu código.

Impacto en SEO

Google usa la estructura semántica de tu HTML para entender la jerarquía y relevancia de tu contenido. Cuando usas <main>, Google sabe exactamente cuál es el contenido principal de la página (y le da más peso). Cuando usas <article>, puede identificar publicaciones independientes. Cuando usas <h1>-<h6> correctamente sin saltar niveles, entiende la estructura de títulos y sub-títulos. Google ha confirmado que la estructura del HTML es un factor de ranking, especialmente con la aparición de featured snippets y passage ranking.

Impacto en accesibilidad

Los lectores de pantalla (NVDA, JAWS, VoiceOver) usan las etiquetas semánticas para navegar. Con <nav> pueden saltar directamente a la navegación. Con <main> pueden saltar al contenido. Con <h1>-<h6> pueden generar una tabla de contenidos virtual que permite al usuario saltar a cualquier sección. Las landmarks que crean las etiquetas semánticas (header, nav, main, footer, aside) son la forma principal de navegación para personas que usan tecnologías asistivas. Sin ellas, el usuario tiene que escuchar todo el contenido de arriba a abajo.

Impacto en mantenibilidad

Un código semántico se auto-documenta. Cuando otro desarrollador (o tú en 6 meses) lee un <nav>, sabe inmediatamente qué es sin tener que buscar la clase CSS y adivinar. Cuando ve <article>, sabe que ese bloque es independiente. Cuando ve <time datetime="...">, sabe que ahí hay una fecha estructurada. Esto reduce el tiempo de onboarding, disminuye errores de interpretación y hace que el código sea más fácil de refactorizar.

SEO

Google entiende mejor tu contenido, mejora el ranking, habilita featured snippets y passage ranking. <main> recibe mayor peso que el resto.

Accesibilidad

Landmarks para navegación con lector de pantalla, tabla de contenidos automática con headings, semántica para cada elemento interactivo.

Mantenibilidad

Código auto-documentado. Menos tiempo entendiendo, más tiempo construyendo. Fácil de refactorizar sin romper la estructura.

El "div-soup" antipatrón

El patrón de <div class="nav">, <div class="header">, <div class="footer"> es el error más común en HTML. Le quitas todo el significado al documento y fuerzas a la máquina a adivinar tu intención. Es como escribir un libro donde todos los capítulos se llaman "Capítulo" sin ningún título. Usa las etiquetas semánticas. Son gratuitas, no agregan peso, y mejoran todo lo que importa.

Ejemplo: página de blog semántica

Para cerrar, acá tenés un ejemplo completo de cómo se ve una página de blog usando todas las etiquetas semánticas que vimos. Compará esto con una versión de solo <div>s y notarás la diferencia en claridad. Cada etiqueta le dice exactamente qué es su contenido, sin necesidad de leer el CSS ni el JavaScript.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog de Desarrollo Web</title>
</head>
<body>

    <!-- Header global -->
    <header>
        <nav aria-label="Principal">
            <a href="/">Mi Blog</a>
            <ul>
                <li><a href="/html">HTML</a></li>
                <li><a href="/css">CSS</a></li>
                <li><a href="/js">JavaScript</a></li>
            </ul>
        </nav>
    </header>

    <!-- Contenido principal (UNO solo por pagina) -->
    <main>

        <!-- Articulo independiente -->
        <article>
            <header>
                <h1>Por qué deberías usar HTML semántico</h1>
                <p>Publicado el
                    <time datetime="2026-06-10">10 de junio, 2026</time>
                    por <address><a href="#">María González</a></address>
                </p>
            </header>

            <section>
                <h2>El problema del "div-soup"</h2>
                <p>Muchos desarrolladores construyen toda su página
                   usando solo <code>&lt;div&gt;</code>...
                   <mark>Este es el error más común.</mark></p>
            </section>

            <section>
                <h2>Las etiquetas que debes conocer</h2>
                <p>Las etiquetas como
                   <abbr title="HyperText Markup Language">HTML</abbr>
                   proveen significado real.</p>

                <figure>
                    <img src="semantico.png"
                         alt="Comparación visual de HTML con divs vs semántico">
                    <figcaption>Figura 1: Div-soup vs HTML semántico</figcaption>
                </figure>
            </section>

            <section>
                <h2>FAQ</h2>
                <details>
                    <summary>¿HTML semántico afecta el SEO?</summary>
                    <p>Sí, Google usa las etiquetas semánticas para
                       entender mejor la estructura y relevancia de tu contenido.</p>
                </details>
                <details>
                    <summary>¿Necesito aprender todas las etiquetas?</summary>
                    <p>No, con 8-10 etiquetas cubres el 90% de los casos:
                       header, nav, main, footer, article, section, aside,
                       figure y time.</p>
                </details>
            </section>

            <footer>
                <p>Tags: HTML, Semántico, SEO, Accesibilidad</p>
            </footer>
        </article>

        <!-- Sidebar complementario -->
        <aside>
            <h2>Artículos relacionados</h2>
            <ul>
                <li><a href="#">CSS Grid: guía completa</a></li>
                <li><a href="#">JavaScript Moderno: ES6+</a></li>
            </ul>
        </aside>

    </main>

    <!-- Footer global -->
    <footer>
        <nav aria-label="Legal">
            <a href="/privacidad">Privacidad</a>
            <a href="/terminos">Términos</a>
        </nav>
        <p>&copy; 2026 Blog de Desarrollo Web</p>
    </footer>

</body>
</html>

Las 10 etiquetas que debes usar siempre

No necesitas memorizar todas las etiquetas HTML. Con estas 10 cubres el 90% de los casos semánticos: <header>, <nav>, <main>, <footer>, <article>, <section>, <aside>, <figure>/<figcaption>, <time>, y <details>/<summary>. Empieza con estas y vas a estar por encima del 80% de los desarrolladores web.