Imágenes y semántica estructural

Tres horas. Media hora para entender qué función cumple una imagen y qué declara cada elemento estructural, y dos horas y media decidiendo textos alternativos, refactorizando marcado ajeno y auditando una web en producción.

Se explica

25 minutos · conceptos y demostración

Hoy hay dos decisiones que se repiten todo el día: qué función cumple cada imagen, y qué representa cada bloque de la página. Ninguna se resuelve mirando cómo queda.

El alt no describe la imagen: la sustituye

<img src="img/portatil.webp"
     alt="Portátil gris abierto sobre una mesa de trabajo">

src indica el archivo y alt el texto alternativo. img es un elemento vacío: no se cierra.

La pregunta habitual, «¿qué pongo en el alt?», casi siempre se responde describiendo lo que se ve. Es la respuesta equivocada.

El texto alternativo es lo que ocupa el lugar de la imagen cuando la imagen no está: porque no ha cargado, porque la conexión es mala, o porque quien lee la página no la ve. Así que la pregunta correcta es:

Si borro esta imagen, ¿qué tendría que decir aquí para que no se pierda nada?

De ahí salen tres casos, y solo tres:

Los dos casos extremos, escritos:

<img src="img/placa-solar.webp"
     alt="Paneles solares instalados sobre la cubierta del edificio">

<img src="img/separador.webp" alt="">

Un texto alternativo vacío puede ser exactamente la decisión correcta.

Dos textos alternativos que no sirven:

alt="foto"

alt="ordenador portátil barato comprar ordenador portátil
ofertas portátiles ordenador gaming tienda Alicante"

El primero no aporta información alguna. El segundo convierte el alt en un almacén de palabras clave, y quien depende de él tiene que escuchar eso entero.

figure y figcaption

Cuando la imagen lleva un pie visible, los dos se marcan juntos:

<figure>
    <img src="img/prototipo.webp"
         alt="Primer prototipo del robot, con la carcasa abierta">

    <figcaption>
        Primer prototipo desarrollado en 2026.
    </figcaption>
</figure>

figcaption es el pie que ve todo el mundo; alt sustituye a la imagen para quien no la ve. No deben decir lo mismo, porque no hacen lo mismo: si los repites, quien use un lector de pantalla escucha la misma frase dos veces.

Un div no dice nada; estos elementos sí

Podríamos construir una web con cientos de div. 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.

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.

Dos matices que se olvidan. <main> va una sola vez por página, y no puede estar dentro de header, nav, article, aside ni footer. Una <section> de verdad, además, admite un encabezado: si no sabrías qué título ponerle, probablemente no es una section.

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

<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.

Así queda un documento 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>

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.

Leer la estructura de una página ajena

Hasta ahora has escrito HTML. Hoy vas a leerlo, que es lo que harás la mayor parte de tu vida profesional: casi siempre trabajarás sobre código que escribió otro.

Abre DevTools con F12. Tres pestañas interesan:

Se trabaja

150 minutos · práctica sobre tu propio proyecto y sobre código ajeno

Los tres primeros pasos deciden textos alternativos y estructura sobre material dado; los cuatro últimos llevan esas decisiones a tu sitio y después a una web en producción.

Paso 1 · ¿Qué alt pondrías? · 20 min

1.1 · Ejemplo resuelto

El logotipo de la empresa en la cabecera, enlazado a index.html.

¿Qué función tiene?

Actúa: es el único contenido de un enlace.

Si la borro, ¿qué se pierde?

Un enlace sin ningún texto. Quien no vea la imagen se encuentra un enlace que no dice adónde va.

Entonces, ¿qué escribo?

El destino, no el dibujo. No «logotipo azul de PixelStore», sino adónde lleva.

Solución

alt="PixelStore · Inicio"

1.2 · Ahora tú

Para cada caso, decide si el alt debe ser descriptivo, funcional o vacío, escríbelo, y di por qué:

1. Un gráfico de barras que compara el consumo energético de tres portátiles.
2. Una fotografía decorativa que separa dos secciones.
3. Un icono de lupa dentro de un enlace, sin ningún texto alrededor.
4. La foto de un producto en su ficha: un teclado mecánico con iluminación RGB.
5. La foto del equipo en la página «Acerca de», con un pie que ya dice quiénes son.

Paso 2 · Imágenes en tu proyecto · 20 min

Crea la carpeta img/ y añade al menos tres imágenes a tu sitio: una informativa, una decorativa y una dentro de un figure con su pie. Enlázalas con rutas relativas.

Añade a todas width, height y, a las que no se vean al abrir la página, loading="lazy":

<img src="img/producto.webp"
     alt="Teclado mecánico compacto"
     width="800"
     height="600"
     loading="lazy">

width y height reservan el hueco antes de que la imagen llegue, y evitan que el texto salte cuando termina de cargar. loading="lazy" retrasa la descarga de las imágenes que todavía no se ven. Más adelante veremos cómo CSS adapta visualmente estas imágenes.

<picture>
    <source srcset="img/portada.webp" type="image/webp">
    <img src="img/portada.jpg" alt="Estudiantes en un laboratorio">
</picture>

<video controls>
    <source src="media/demo.mp4" type="video/mp4">
    Tu navegador no puede reproducir este vídeo.
</video>
<audio controls>
<source src=“media/audio.mp3” type=“audio/mpeg”>
</audio>

<iframe src="https://example.com"
        title="Contenido externo de ejemplo"
        loading="lazy"></iframe>

Paso 3 · El infierno de los div · 30 min

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>

3.1 · Ejemplo resuelto · 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.

3.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.

3.3 · Ahora tú

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

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

Paso 4 · Dos decisiones que se discuten · 15 min

Las dos se resuelven en pareja, en voz alta, antes de mirar la respuesta.

4.1 · Botón contra falso botón

<!-- 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é?

4.2 · ¿section o article?

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?

Paso 5 · Refactoriza tu propio sitio · 25 min

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

Escribe en un comentario, en cada página, una decisión que hayas tenido que pensar: un div que decidiste conservar, o un bloque en el que dudaste entre section y article.

Antes de continuar: ninguna de las cuatro páginas tiene más de un main, y ninguna usa un div donde exista un elemento con significado.

Paso 6 · Audita una web real · 25 min

Elige una web de noticias o una tienda conocida y respóndela con DevTools delante:

1. ¿Tiene un único <main>? ¿Cuántos <nav>?
2. ¿Cómo está marcado el menú principal: lista de enlaces o enlaces sueltos?
3. Recorre la jerarquía de encabezados. ¿Hay un solo h1? ¿Se salta algún nivel?
4. Elige tres imágenes distintas: ¿tienen alt? ¿Es descriptivo, funcional o vacío? ¿Está bien elegido?
5. Busca algo que parezca un botón. ¿Es un <button> o un div disfrazado? Compruébalo intentando llegar con Tab.

<details>
    <summary>¿Cuánto tarda el envío?</summary>
    <p>Los pedidos se envían en 24–48 horas.</p>
</details>

<time datetime="2026-09-15">15 de septiembre de 2026</time>

Paso 7 · La misma auditoría sobre lo tuyo, y revisión cruzada · 15 min

Pásale a tus cuatro páginas exactamente la misma auditoría que acabas de hacerle a una web profesional, y corrige lo que encuentres.

No es casualidad que la auditoría vaya antes: es más fácil ver un fallo en el código de otro, y ese ojo entrenado es el que después aplicas al tuyo.

Intercambia después únicamente tu index.html con un compañero. No lo corrijas por él: encuentra un problema semántico concreto y descríbelo con este formato:

1. Qué veo: señala el elemento y el contenido afectado.
2. Por qué importa: explica qué significado o navegación pierde.
3. Qué probaría: propone una alternativa sin reescribir el documento.

El autor decide si acepta la observación. También puede rechazarla, pero debe justificar su decisión con el significado del contenido.

Ampliación si has completado el trabajo

Primero termina y comprueba los siete pasos. Los dos retos trabajan sobre material que no da ninguna pista, que es la situación real cuando heredas un proyecto.

Reto 1 · Refactorizar sin nombres de clase que ayuden

En el paso 3 los nombres de clase casi daban la respuesta: top-bar, menu, pie. Aquí no hay nada de eso.

<div id="a1">
    <div class="b1">
        <div class="c1">Revista Mecánica</div>
        <div class="c2">
            <a href="index.html">Portada</a>
            <a href="numeros.html">Números</a>
            <a href="suscripcion.html">Suscripción</a>
        </div>
    </div>
    <div class="b2">
        <div class="c3">
            <div class="d1">Motores de combustión: el final de una era</div>
            <div class="d2">Por Elena Ruiz · 12 de marzo de 2026</div>
            <div class="d3">El calendario europeo de prohibición obliga a replantear
            toda la cadena de suministro.</div>
        </div>
        <div class="c3">
            <div class="d1">Diez años de baterías de estado sólido</div>
            <div class="d2">Por Marc Oliver · 3 de marzo de 2026</div>
            <div class="d3">Lo que se prometió, lo que llegó y lo que sigue sin
            resolverse.</div>
        </div>
    </div>
    <div class="b3">
        <div class="c4">Suscríbete y recibe cada número en papel.</div>
    </div>
    <div class="b4">Revista Mecánica · Depósito legal V-1234-2011</div>
</div>

Reescríbelo entero. Como no hay nombres que te orienten, la decisión sale del contenido: qué dice cada bloque y qué papel cumple en la página. Justifica por escrito estas cuatro:

1. Los dos bloques c3 repetidos, ¿son section o article? Aplica la regla.
2. La línea de autoría y fecha, ¿qué elemento merece? Hay uno pensado para fechas.
3. El bloque b3, ¿es contenido principal o secundario?
4. ¿Queda algún div en tu versión? Si queda, di por qué es el elemento correcto ahí.

Reto 2 · Cinco textos alternativos en producción

Vuelve a la web que auditaste y localiza cinco imágenes con funciones distintas: al menos un logotipo enlazado, un icono dentro de un botón o enlace, una foto de contenido y algo decorativo.

Cuenta cuántos de los cinco están bien resueltos. Si alguna imagen no tiene atributo alt, anótalo aparte: no es lo mismo que tenerlo vacío, y esa distinción es la que hoy tienes que poder explicar.

Cierre

5 minutos · comprobación y recuerdo