Unas etiquetas de agrupación muy interesantes son las etiquetas <figure>
y <figcaption>
. Dichas etiquetas se utilizan para agrupar conceptos formados por una ilustración (figura) y su leyenda. Con estos elementos se puede agrupar una imagen y su correspondiente pie de foto, pudiendo ampliar a otro tipo de contenidos multimedia como video, audio u otros.
Las etiquetas en cuestión serían las siguientes:
Etiqueta | Descripción |
---|---|
<figure> |
Establece una figura, que puede contener una serie de elementos diversos. |
<figcaption> |
Asocia una leyenda, generalmente texto, a la figura anterior. Opcional. |
¿Cómo podríamos utilizar estas etiquetas HTML? Pues veamos un ejemplo:
<figure>
<img src="http://lenguajehtml.com/img/html5-logo.png" alt="Logotipo de HTML5">
<figcaption>Logotipo oficial del lenguaje de marcas HTML5.</figcaption>
</figure>
De esta forma, la ilustración muestra un cierto contenido (imágenes, videos, sonidos, fragmento de código, etc...) con su respectivo pie con información.
Recuerda que en la ilustración o figura, se pueden contener todo tipo de elementos, no solo imágenes. Ejemplos válidos podrían ser videos, párrafos de texto o incluso contenido multimedia de otro tipo.