HTML semántico · Lenguaje de marcas

Hoy · Hoja de ruta

1. Aprende: Qué declara cada elemento estructural, cuándo un div sigue siendo correcto y qué separa section de article.
2. Haz: Refactoriza un documento hecho solo de div hasta convertirlo en HTML semántico.
3. Comprueba: Resuelve los dos retos discutiéndolos con tu compañero.

Antes de empezar · 5 minutos, sin apuntes

¿Cuándo debe ser alt="" y cuándo debe describir información?
¿Qué aporta figure cuando una imagen tiene un pie propio?
Detecta el problema: <img src="grafico.png" alt="imagen">.

Podríamos construir una web con cientos de `div`

El resultado funcionaría, pero un <div> no aporta significado alguno: es únicamente un contenedor. HTML tiene elementos que explican qué representa cada parte, y eso permite que un lector de pantalla ofrezca una lista de zonas y salte directamente a la que interese.

`<header>`

<header>
    <h1>PixelStore</h1>
</header>

Contenido introductorio, de la página o de una sección.

`<nav>`

Un bloque importante de navegación. No hace falta envolver en nav cualquier grupo de tres enlaces: se reserva para la navegación principal del sitio o de una sección.

`<main>`

<main>
    ...
</main>

El contenido principal del documento. Uno por página, y no puede estar dentro de header, nav, article, aside ni footer.

`<section>`

Una sección temática:

<section>
    <h2>Productos destacados</h2>
    ...
</section>

Buena señal de que tienes una sección de verdad: tiene sentido darle un encabezado. Si no sabrías qué título ponerle, probablemente no es una section.

`<article>`

Contenido que tiene sentido por sí mismo:

<article>
    <h3>Portátil Nova 14</h3>
    <p>Nuevo portátil profesional de 14 pulgadas.</p>
</article>

Ejemplos habituales: una noticia, una publicación, un comentario, una ficha de producto, una entrada de blog.

`<aside>`

Contenido relacionado pero secundario respecto al principal.

`<footer>`

Pie de la página o de una sección. Puede contener autoría, información legal, enlaces relacionados, contacto o copyright.

Las zonas que declara un documento bien estructurado

header · la cabecera de la página o de una sección
nav · un bloque de navegación
main · el contenido principal, una sola vez por página
section · una parte temática, con su encabezado
article · contenido que se entiende fuera de esta página
aside · contenido relacionado pero secundario
footer · el pie de la página o de una sección

Landmark

Cada una de esas zonas. Son los puntos de referencia que permiten recorrer una página sin verla, igual que tú la recorres mirando dónde está el menú y dónde el contenido.

`section` o `article`

La regla que resuelve casi todos los casos:

Si el contenido tuviera sentido publicado por separado, es un article. Si solo lo tiene como parte de esta página, es una section.

Una ficha de producto se entiende sola: aparece en un buscador, se comparte por mensaje, tiene su propio título. Es un article. El catálogo que agrupa veinte fichas solo tiene sentido dentro de la tienda: es una section.

El uso legítimo de `div`

No. <div> es un contenedor genérico perfectamente válido. La pregunta es:

¿Existe un elemento con un significado más adecuado?

Si existe, úsalo. Si no existe —solo estás agrupando cosas de cara al CSS, sin que ese grupo represente ninguna zona con significado— div es exactamente lo correcto. El error no es usar div: es usarlo en lugar de algo que sí significaba.

Un ejemplo completo

<body>

    <header>
        <h1>PixelStore</h1>

        <nav aria-label="Navegación principal">
            <ul>
                <li><a href="index.html">Inicio</a></li>
                <li><a href="productos.html">Productos</a></li>
                <li><a href="contacto.html">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <main>

        <section>
            <h2>Productos destacados</h2>

            <article>
                <h3>Portátil Nova 14</h3>
                <p>Equipo ligero orientado al trabajo y al estudio.</p>
            </article>

            <article>
                <h3>Monitor Vision 27</h3>
                <p>Monitor de 27 pulgadas orientado a productividad.</p>
            </article>
        </section>

    </main>

    <footer>
        <p>© 2026 PixelStore</p>
    </footer>

</body>

Vista previaEl documento entendido como regiones

PixelStore

Productos destacados

Portátil Nova 14

Monitor Vision 27

Visualmente podrían ser cajas idénticas; las etiquetas indican qué papel cumple cada región para el navegador y las tecnologías de asistencia.

Aunque todavía no tenga CSS, la estructura del documento ya tiene sentido. Léela en voz alta: se entiende qué es cada cosa sin ver la pantalla.

Tarea 7 · El infierno de los div

Este código es del tipo que te vas a encontrar heredado:

<div id="wrapper">
    <div class="top-bar">
        <div class="logo">PixelStore</div>
        <div class="menu">
            <a href="index.html">Inicio</a>
            <a href="productos.html">Productos</a>
        </div>
    </div>

    <div class="content-box">
        <div class="bloque-central">
            <div class="titulo-seccion">Novedades</div>
            <div class="tarjeta">
                <div class="nombre-producto">Portátil Nova 14</div>
                <div class="desc">Equipo profesional ligero.</div>
            </div>
        </div>
        <div class="lateral">
            <div class="aviso">Horario: L-V de 9 a 18h.</div>
        </div>
    </div>

    <div class="pie">
        <div class="copy">© 2026 PixelStore</div>
    </div>
</div>

Paso 1 · Te enseño uno

Empiezo por la barra superior:

¿Qué es div.top-bar?: La cabecera de la página. Existe un elemento para eso: <header>.
¿Y div.logo?: Es el nombre del sitio, el título de mayor rango de la portada: un <h1>, no una caja con texto.
¿Y div.menu?: Es la navegación, y sus enlaces son un conjunto: <nav> con una <ul>.

<header>
    <h1>PixelStore</h1>
    <nav aria-label="Navegación principal">
        <ul>
            <li><a href="index.html">Inicio</a></li>
            <li><a href="productos.html">Productos</a></li>
        </ul>
    </nav>
</header>

Cuatro div han desaparecido y el documento dice cuatro cosas que antes no decía.

Paso 2 · Completa una versión guiada

Antes de abordar el documento entero, sustituye en una copia únicamente content-box, bloque-central y titulo-seccion. Elige entre main, section y un encabezado, y escribe al lado de cada cambio qué significado has añadido.

Paso 3 · Ahora tú

Reescribe el resto. Al terminar, tu versión debe cumplir:

No queda ningún div cuyo nombre de clase describa algo que HTML ya sabe decir.
Hay un único <main>.
«Novedades» es un encabezado, y «Portátil Nova 14» un encabezado de nivel inferior.
La tarjeta está marcada como article, y sabes justificar por qué no es una section.
El aviso lateral es un aside y el pie un footer.
No has perdido ni una palabra del contenido original.

Objetivo mínimoRefactoriza el documento completo y justifica cada región.

Si lo tienesAñade una segunda tarjeta sin duplicar regiones que deberían compartirse.

RetoRefactoriza otro fragmento ajeno sin nombres de clase que te den pistas.

Reto 3 · Botón contra falso botón (10 min)

<!-- Opción A -->
<div onclick="guardar()">Guardar</div>

<!-- Opción B -->
<button type="button">Guardar</button>

Las dos funcionan al hacer clic. ¿Cuál eliges y por qué?

Ver respuesta del Reto 3

La B, y no por estilo. Un <button> trae de fábrica cuatro cosas que la A no tiene y habría que reconstruir a mano: se alcanza con Tab, se activa con Enter y con la barra espaciadora, se anuncia como «botón» a un lector de pantalla, y recibe el foco visible.

La opción A solo funciona para quien use ratón y vea la pantalla. Mismo patrón de toda la unidad: se ve igual, y no hace lo mismo.

Reto 4 · ¿`section` o `article`? (10 min)

Discútelo con tu compañero. En una tienda online:

¿La ficha individual de un producto es section o article?
¿Y el catálogo que agrupa los veinte productos?
¿Y un comentario de un cliente dentro de la ficha?

Ver respuesta del Reto 4

La ficha es un article: se entiende sola fuera de la página, y de hecho es lo que se comparte o lo que devuelve un buscador.

El catálogo es una section: agrupa artículos y solo tiene sentido dentro de la tienda. Es decir, una section que contiene veinte article, y no al revés.

El comentario es un article dentro del article de la ficha. Sí, se pueden anidar: un comentario es contenido independiente y atribuible a alguien.

Fíjate en que aquí no hay una única respuesta mecánica. HTML semántico admite discusión, y saber defender tu decisión vale más que acertar la etiqueta «oficial».

Ahora tú · Refactoriza tu propio sitio

Aplica lo mismo a tus cuatro páginas: header, nav, main, footer en todas, y section / article donde corresponda.

Antes de cerrar · 2 minutos, sin mirar

¿Cuántos <main> puede haber en una página?
Da la regla de una frase que separa section de article.
Nombra dos cosas que un <button> hace y un <div onclick> no.

Ver respuestas

1 · Uno. Es el contenido principal del documento, y no puede haber dos.

2 · Si tendría sentido publicado por separado es article; si solo lo tiene dentro de esta página, section.

3 · Se alcanza con Tab, se activa con teclado, se anuncia como botón y recibe el foco. Bastan dos.

Podríamos construir una web con cientos de div

<header>

<nav>

<main>

<section>

<article>

<aside>

<footer>

section o article

El uso legítimo de div