Hay varios tipos de elementos especializados en mostrar imágenes.
imgEs un elemento de fraseo que muestra una imagen.
Puede tener los siguientes atributos:
srcURL del recurso.
altTexto que se muestra cuando no se puede descargar la imagen.
figureEs un elemento de agrupamiento específicamente diseñado para mostrar imágenes.
figcaption
Es un elemento de agrupamiento específicamente diseñado para mostrar el
texto que describe el contenido de un
figure.
| 1 | <!DOCTYPE html> |
| 2 | <html lang="es"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" |
| 6 | content="width=device-width"> |
| 7 | <title>Imágenes</title> |
| 8 | </head> |
| 9 | <body> |
| 10 | <h1>Imágenes</h1> |
| 11 | <style> |
| 12 | img { |
| 13 | max-width: 100% |
| 14 | } |
| 15 | </style> |
| 16 | <figure> |
| 17 | <img alt="Un gatito" |
| 18 | src="https://media.giphy.com/media/MDJ9IbxxvDUQM/giphy.gif"> |
| 19 | <figcaption>Gatito</figcaption> |
| 20 | </figure> |
| 21 | <footer> |
| 22 | <p> |
| 23 | Imágen de |
| 24 | <a target="_blank" rel="noreferrer" href="https://giphy.com">Giphy</a>. |
| 25 | </p> |
| 26 | </footer> |
| 27 | </body> |
| 28 | </html> |
La especificación técnica del elemento
img
está en
https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element
La especificación técnica del elemento
figure
está en
https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element
La especificación técnica del elemento
figcaption
está en
https://html.spec.whatwg.org/multipage/grouping-content.html#the-figcaption-element