¿Tienes dudas acerca de la etiqueta <figcaption> en HTML? ¿No sabes cómo utilizarla de manera correcta? Pues, no te preocupes porque para eso estamos aquí, para explicarte todo lo que necesitas saber sobre esta etiqueta, qué es y cómo se usa, y que puedas sacarle partido de la mejor forma posible. Ya verás que es muy fácil.
Eso sí, antes que nada, recuerda que esta lección forma parte del Diccionario HTML del canal, donde vemos cada una de las etiquetas de este lenguaje, así que puedes consultarlo cuando gustes.
Y sin más demora, veamos la etiqueta <figcaption> iVamos al lío!
¿Qué es y qué hace figcaption en HTML?
La etiqueta figcaption en HTML se utiliza para proporcionar una leyenda a una imagen o conjunto de imágenes. Esta etiqueta se utiliza dentro del elemento figure y sirve para mejorar la accesibilidad y la estructura del contenido.
Esto es especialmente útil para artículos, blogs o sitios web que necesitan comentar las imágenes que se muestran.
Y ahora, veamos un ejemplo para ver cómo se usa.
Cómo usar figcaption (ejemplo)
Es sumamente sencillo: Primero se coloca la etiqueta <figure>, y englobado por esta, la imagen seguida de la etiqueta <figcaption> con la leyenda que queremos que se lea al pie.
Aquí puedes ver el código:
<figure>
<img src="/img-ejemplo.jpg" alt="Descripción de la imagen">
<figcaption>Leyenda de la imagen (figcaption).</figcaption>
</figure>A continuación puedes ver cómo se ve en el navegador el efecto de esta etiqueta.
Consideraciones finales sobre el uso de figcaption
Y antes de irte, déjame decirte un par de precisiones sobre la etiqueta figcaption:
- Debe ser usada dentro de un elemento figure.
- Aunque se usa principalmente con imágenes, pero también puede ser útil en otros contenidos (vídeos o gráficos), o sea, para colocar notas al pie de estos elementos.
- Aunque a veces poner esta etiqueta en una imagen pueda parecer un poco cutre, la verdad es que hay ocasiones en que mejora la accesibilidad y proporcionar información adicional. Recuerda que ciertas imágenes requieren aclaraciones. Esta necesidad suele darse sobre todo en los gráficos, pues son elementos cargados de contenido técnico o información muy específica sobre cierta materia.
- Para que no quede tan soso, puedes utilizar estilos CSS para hacerlo más atractivo.
Ya ves que no tiene mucha complicación, pero si te has quedado con alguna duda, tienes alguna sugerencia, o quieres decirme cualquier cosa, déjalo en los comentarios y te responderé.
Nos vemos en la próxima lección de HTML.