La etiqueta HTML <figure>

Contenedor de ilustraciones o figuras

html ᐳ La etiqueta HTML <dl> ᐳ La etiqueta HTML <figure> ᐳ Etiquetas HTML de imágenes

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.

Ilustraciones (figuras)

¿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.

Tabla de contenidos