Imágenes
El elemento <img> se utiliza para insertar una imagen. Es un elemento vacío.
Por ejemplo:
<img src="imagen.jpg" alt="Descripción de la imagen">
Los atributos más importantes son:
| Atributo | Descripción |
|---|---|
src | Especifica la ruta de la imagen. Puede ser local o una URL. Los formatos soportados dependen de cada navegador, pero en general se pueden utilizar JPG, PNG, WEBP y GIF, entre otros. |
alt | Texto alternativo. Se usa si no se puede cargar la imagen o para los lectores de pantalla. Es obligatorio. |
height | Altura. Si no se especifica, se escoge el tamaño original. Si se especifica, se escala. Es de los pocos casos en HTML5 en que un atributo tiene información de representación. |
width | Anchura de la imagen. El funcionamiento es el mismo que el del atributo height. |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Imágenes</title>
</head>
<body>
<p>Imagen en internet</p>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png"
alt="HTML5"
/>
<p>Imagen no encontrada</p>
<img src="http://rutaincorrecta.jpg" alt="Logo HTML5" />
<p>Imagen local</p>
<img src="html5.png" alt="Imagen local" />
</body>
</html>
El navegador mostraría lo siguiente:
Para la segunda etiqueta <img>, como no se encuentra la imagen, el navegador muestra el texto alternativo.
La última etiqueta <img> enlaza una imagen local. Debemos tener esa imagen en el mismo directorio que el archivo HTML, sino no se mostraría.
Probar en el navegador