Imágenes y listas
🎯 Al terminar esta lección podrás…
- Insertar imágenes y describirlas para que todos las entiendan.
- Elegir el formato y el tamaño adecuados.
- Crear listas ordenadas, no ordenadas y anidadas.
1.Insertar imágenes
La etiqueta <img> muestra una imagen. Es una etiqueta vacía: no lleva contenido ni etiqueta de cierre, y toda su información va en atributos.
<img src="img/paisaje.svg" alt="Montañas con un sol al atardecer">src(source): la ruta del archivo de imagen. Funciona igual que elhrefde los enlaces que viste en la lección 2.alt: el texto alternativo, que describe la imagen con palabras.
Así se ve
📌 Nota · Organiza tus archivos
Guarda las imágenes en una carpeta propia, por ejemplo img/, junto a tu index.html. Usa nombres en minúsculas, sin espacios ni tildes: mi-foto.jpg y no Mi Foto.JPG.
2.El texto alternativo
El atributo alt es obligatorio y cumple tres funciones:
- Lo leen en voz alta los lectores de pantalla que usan personas ciegas o con baja visión.
- Se muestra en su lugar si la imagen no carga (mala conexión, ruta equivocada).
- Ayuda a los buscadores a entender de qué trata la imagen.
Cómo escribir un buen alt
| Situación | Mal | Bien |
|---|---|---|
| Foto de un perro | alt="imagen1" | alt="Perro labrador corriendo en la playa" |
| Logotipo con enlace | alt="logo" | alt="Ir al inicio de Mi Sitio" |
| Imagen solo decorativa | alt="adorno azul" | alt="" (vacío a propósito) |
💡 Consejo
Describe lo que aporta la imagen, en una frase breve. No empieces con «imagen de…»: el lector de pantalla ya anuncia que es una imagen. Si la imagen es puramente decorativa, deja alt="" para que se omita.
3.Tamaño y formatos
Ancho y alto
Los atributos width y height indican el tamaño en píxeles. Ponerlos evita que el contenido «salte» mientras la imagen carga, porque el navegador reserva el espacio desde el principio.
<img src="img/paisaje.jpg" alt="Montañas al atardecer"
width="600" height="360" loading="lazy">loading="lazy" hace que las imágenes lejos de la pantalla se descarguen solo cuando el visitante se acerca. Ahorra datos en páginas largas.
Qué formato elegir
| Formato | Úsalo para | Característica |
|---|---|---|
| JPG | Fotografías | Pesa poco; no admite transparencia. |
| PNG | Capturas, logotipos, transparencias | Mejor calidad en bordes nítidos; pesa más. |
| WebP | Casi todo, en sitios modernos | Pesa menos que JPG y PNG con buena calidad. |
| SVG | Iconos, logotipos, ilustraciones | Se ve nítido a cualquier tamaño. |
⚠️ Importante · No uses imágenes enormes
Una foto de 8 MB tomada con el celular hará lenta tu página aunque la muestres pequeña. Redúcela antes de subirla (por ejemplo, a unos 1200 píxeles de ancho). Usa solo imágenes propias o con licencia que permita su uso.
4.Imagen con pie de foto
Cuando la imagen necesita una leyenda, agrúpala con <figure> y <figcaption>. Así la imagen y su descripción quedan unidas por significado.
<figure>
<img src="img/paisaje.svg" alt="Montañas con un sol al atardecer">
<figcaption>Ilustración del paisaje de ejemplo del curso.</figcaption>
</figure>Así se ve
📌 Nota
El pie de foto y el alt no son lo mismo. El alt describe lo que se ve para quien no puede verlo; el figcaption es una leyenda visible para todos.
✏️ Practica en vivo
Prueba cambiar el nombre del archivo a uno que no existe (por ejemplo foto-falsa.png): verás cómo se comporta el navegador cuando la imagen no carga.
5.Listas
Las listas agrupan elementos relacionados. Hay dos tipos principales, y cada elemento de la lista va en una etiqueta <li> (list item).
Lista no ordenada: <ul>
Para elementos donde el orden no importa. Se muestra con viñetas.
<ul>
<li>Pan</li>
<li>Leche</li>
<li>Huevos</li>
</ul>Así se ve
- Pan
- Leche
- Huevos
Lista ordenada: <ol>
Para pasos o rankings donde el orden sí importa. Se numera automáticamente.
<ol>
<li>Abre el editor.</li>
<li>Escribe el código.</li>
<li>Guarda y revisa en el navegador.</li>
</ol>Así se ve
- Abre el editor.
- Escribe el código.
- Guarda y revisa en el navegador.
La lista ordenada admite atributos útiles:
start="5": empieza a contar desde 5.reversed: cuenta hacia atrás, ideal para cuentas regresivas y «Top 10».type="a": usa letras (a, b, c) o números romanos (type="I").
⚠️ Importante · Dentro de ul y ol solo van li
No pongas texto suelto ni otras etiquetas directamente dentro de la lista. El contenido siempre va dentro de un <li>.
✏️ Practica en vivo
Añade una lista numerada dentro de otra, cambia reversed por start="5" y observa el efecto.
6.Listas anidadas
Una lista puede contener otra. La lista interna va dentro del <li> al que pertenece, no entre dos <li>.
<ul>
<li>Frutas
<ul>
<li>Manzana</li>
<li>Mango</li>
</ul>
</li>
<li>Verduras</li>
</ul>Así se ve
- Frutas
- Manzana
- Mango
- Verduras
🔍 Ejemplo · Los menús son listas
Los menús de navegación de casi todos los sitios son una lista de enlaces: <ul> con <li><a href="…">…</a></li>. Más adelante les darás estilo con CSS para que se vean como una barra horizontal.
7.Listas de descripción
Sirven para pares de término y definición, como un glosario o una ficha de datos. Usan tres etiquetas: <dl> (la lista), <dt> (el término) y <dd> (su descripción).
<dl>
<dt>HTML</dt>
<dd>Lenguaje que estructura el contenido.</dd>
<dt>CSS</dt>
<dd>Lenguaje que da estilo visual.</dd>
</dl>Así se ve
- HTML
- Lenguaje que estructura el contenido.
- CSS
- Lenguaje que da estilo visual.
8.Errores frecuentes
- Olvidar el
alto escribir nombres de archivo como «IMG_2043». - Ruta equivocada: si ves el texto alternativo o un icono roto, revisa carpeta, mayúsculas y extensión.
- Usar
<br>y guiones para hacer listas en vez deulyli. - Elegir
olcuando el orden no importa, oulcuando sí. - Poner la lista anidada fuera del
lique la contiene. - Imágenes demasiado pesadas que ralentizan la página.
📒 Apuntes para llevar
<img src="ruta" alt="descripción">inserta una imagen;srcyaltson indispensables.- El
altdescribe lo que aporta la imagen; si es decorativa,alt="". widthyheightreservan espacio;loading="lazy"retrasa la descarga.- JPG para fotos, PNG para transparencias, WebP para casi todo y SVG para iconos.
<figure>y<figcaption>unen una imagen con su leyenda.<ul>es una lista con viñetas;<ol>, una lista numerada.- Cada elemento va en un
<li>; las listas anidadas van dentro de un<li>. <dl>,<dt>y<dd>forman listas de término y descripción.
9.Glosario
| Término | Significado |
|---|---|
src | Atributo con la ruta del archivo de una imagen. |
Texto alternativo (alt) | Descripción en texto de una imagen, para accesibilidad y respaldo. |
| Lector de pantalla | Programa que lee en voz alta el contenido de una página. |
| Carga diferida | Descargar una imagen solo cuando está por verse. |
| Lista ordenada | Lista numerada, en la que el orden importa. |
| Lista no ordenada | Lista con viñetas, en la que el orden no importa. |
| Lista anidada | Lista contenida dentro de un elemento de otra lista. |
🧠 Comprueba lo aprendido
Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.
¿Qué atributo de <img> es indispensable para accesibilidad?
alt describe la imagen para quien no la ve y se muestra si la imagen no carga.
Una imagen puramente decorativa debería llevar…
Un alt vacío le indica al lector de pantalla que la omita.
Quieres una lista de pasos donde el orden importa. ¿Cuál usas?
<ol> numera automáticamente; <ul> usa viñetas.
¿Dónde va una lista anidada?
La lista interna forma parte del elemento al que complementa, antes de su </li>.
Tu progreso se guarda en este navegador y se refleja en el índice del curso.
🚀 ¡Ahora te toca!
Crea una página con tu «Top 5» de algo que te guste, con imagen y listas.