Curso de HTML

Construye la estructura de la web.

Aprende cada etiqueta con ejemplos interactivos y crea proyectos reales.

Imágenes <img>

La etiqueta <img> parece trivial, pero el atributo alt que casi todos olvidan es uno de los más importantes de todo HTML para accesibilidad.

Cargando editor...

Resultado

Preparando resultado...

Cambia el texto de alt y luego, en las herramientas de desarrollador del navegador, busca cómo un lector de pantalla vería esa descripción.

La etiqueta <img> no tiene contenido ni etiqueta de cierre; toda su información va en atributos:

src

La ruta o URL del archivo de imagen.

alt (descriptivo)

Describe la imagen en palabras. Lo usan los lectores de pantalla, los buscadores, y se muestra si la imagen no carga.

alt=""

Un alt vacío, a propósito, para imágenes puramente decorativas: le dice al lector de pantalla que la ignore.

width / height

Reservan el espacio de la imagen en la página antes de que termine de cargar, evitando que el contenido salte.

Reto rápido

A esta imagen le falta el atributo alt. Agrégale uno que describa lo que muestra.

En esta lección

Consejo

Piensa el alt como si describieras la imagen por teléfono a alguien que no puede verla.

Dato extra

<img> no tiene etiqueta de cierre (no existe </img>); es un elemento vacío, igual que <br> o <meta>.

Error común

Omitir el atributo alt por completo, o rellenarlo con algo no descriptivo como alt="imagen" o alt="foto1".

Siguiente paso

Ya sabes mostrar imágenes correctamente. Ahora veamos cómo escribir bien la ruta del atributo src.