fbpx

HTML figcaption

La mayoría de documentos web contienen imágenes. Cuando estas no transmiten un mensaje de forma directa o no son de fácil reconocimiento, suelen ir acompañadas de un determinado texto o pie de foto. La etiqueta HTML <figcaption> lo hace posible.

Descripción

La etiqueta HTML <figcaption> es un elemento de contenido que permite definir un texto coherente y complementario en forma de leyenda o título de un bloque de contenido, representado a su vez con la etiqueta <figure>.

Mientras el elemento HTML <figure> es usado para mostrar contenido autónomo (del resto de un texto web) en forma de imagen, ilustración, gráfico, tabla de datos, vídeo, audio o fragmentos de código, entre otros, la etiqueta <figcaption> es opcional y proporciona una breve identificación o descripción asociada a ese elemento macro.

Por su semántica (viene de figure “imagen/ilustración” y caption “título/leyenda”, en inglés), indica el título de una imagen o ilustración. Puede ser ubicado antes (arriba) o después (debajo) del elemento que se enmarca con la etiqueta <figure>. Sin embargo, no es independiente, <figcaption> está dentro de <figure>, funcionan como una unidad.

Ejemplo de uso

El siguiente es un ejemplo de uso simple, muestra la visualización como código correcto de una imagen con un pie:

<figure>
  <img src=https://i.pinimg.com/originals/e4/ef/98/e4ef988696aab947c6b939eafc941fea.jpg alt="europa política mapa">
  <figcaption> Mapa político de Europa actual.</figcaption>
</figure>

Se puede observar que entre las etiquetas de bloque <figure> y </figure> se inserta el enlace de una imagen, representado dentro de la etiqueta de hipertexto <img>, seguida del texto que la identifica como título, precedido de la etiqueta <figcaption> y delimitado con </figcaption>.

Atributos

Para el elemento HTML <figcaption> aplican los atributos generales del lenguaje HTML.

La etiqueta <figcaption> como texto de referencia es bastante útil y práctica para comentar imágenes sencillas o complejas: origen, autoría, características y cualquier otro dato de interés que les aporta significado.



Share This