1.3 Imágenes y listas¶

Imágenes¶

<img src="foto.jpg" alt="Descripción de la foto" width="300">

src: ruta de la imagen (relativa o una URL).
alt: texto alternativo, obligatorio: lo leen los lectores de pantalla y se muestra si la imagen no carga.
width / height: tamaño en píxeles (conviene indicarlo para que la página no "salte" al cargar).
loading="lazy": el navegador descarga la imagen solo cuando está cerca de verse. Úsalo en las imágenes que están más abajo en la página, no en la primera que ve el usuario.
srcset y sizes: ofrecen la misma imagen en varios tamaños y el navegador elige la más adecuada para cada pantalla (<img src="foto-800.jpg" srcset="foto-400.jpg 400w, foto-800.jpg 800w" sizes="(max-width: 600px) 400px, 800px" alt="...">).

Formatos

JPG para fotos, PNG para imágenes con transparencia, SVG para iconos y dibujos que se adaptan a cualquier tamaño, WebP como alternativa moderna y ligera.

Listas¶

Lista	Etiquetas
Con viñetas	`<ul>` + `<li>`
Numerada	`<ol>` + `<li>` (admite `start`, `reversed`, `type`)
De definiciones	`<dl>` + `<dt>` (término) + `<dd>` (descripción)

Las listas se pueden anidar: una lista dentro de un <li>.