Etiqueta figcaption en HTML
La etiqueta HTML5 HTML <figcaption> representa un título o leyenda asociado al contenido del elemento padre <figure>, pudiendo ser colocado como primer o último hijo. Es importante destacar que el elemento <figcaption> es opcional y que se mostrará usualmente abajo de la imagen
La etiqueta HTML5 <figcaption> se utiliza para proporcionar una leyenda o título a una figura. Se utiliza en combinación con la etiqueta <figure> para agrupar una imagen u otro contenido multimedia con su título o leyenda correspondiente.
Como complemento al contenedor <figure> y se utiliza para proporcionar una descripción o título para el contenido multimedia que se está mostrando en la figura.
Por ejemplo, en una página web de noticias que muestra una imagen de un evento, la etiqueta <figcaption> podría utilizarse para proporcionar una descripción del evento.
Sintaxis:
<figcaption> Descripción </figcaption>
Ejemplo de uso
Aquí tienes un ejemplo de cómo se podría utilizar la etiqueta <figcaption> en HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de uso de la etiqueta <figcaption></title>
</head>
<body>
<h1>Galería de imágenes</h1>
<figure>
<img src="imagen1.jpg" alt="Imagen 1">
<figcaption>Esta es la descripción de la imagen 1.</figcaption>
</figure>
<figure>
<img src="imagen2.jpg" alt="Imagen 2">
<figcaption>Esta es la descripción de la imagen 2.</figcaption>
</figure>
<figure>
<img src="imagen3.jpg" alt="Imagen 3">
<figcaption>Esta es la descripción de la imagen 3.</figcaption>
</figure>
</body>
</html>
Lenguaje del código: HTML, XML (xml)
En este ejemplo, se ha creado una galería de imágenes utilizando la etiqueta <figure> y se ha añadido una leyenda utilizando la etiqueta <figcaption>. Cada figura contiene una imagen y una descripción correspondiente. El texto de la leyenda se mostrará debajo de cada imagen.
Es importante tener en cuenta que el código HTML puede variar dependiendo de la estructura de la página web y de cómo se quiera mostrar la galería de imágenes en la página.
A nivel semántico la descripción dada en el <figcaption>, está asociada a la imagen y los buscadores sabrán perfectamente que el texto envuelto en la etiqueta <figcaption> es la descripción de la imagen y no parte del contenido principal de la página. Este tipo de detalles ayudan a ganar SEO y lograr un mejor posicionamiento en los buscadores.
Atributos
La etiqueta HTML5 <figcaption> no tiene muchos atributos específicos, ya que su función principal es simplemente proporcionar una leyenda o título a una figura. Sin embargo, aquí te presento los atributos globales disponibles:
- class: se utiliza para asignar una o varias clases CSS al elemento <figcaption>, lo que permite aplicar estilos personalizados a ese elemento.
- id: se utiliza para especificar un identificador único para el elemento <figcaption>. Este atributo es útil para vincular el elemento con estilos personalizados o para hacer referencia al elemento desde otros elementos o scripts en la página.
- lang: se utiliza para especificar el idioma principal utilizado en el contenido del elemento <figcaption>.
- dir: se utiliza para especificar la dirección del texto del contenido del elemento <figcaption>. Los valores posibles son “ltr” para izquierda a derecha y “rtl” para derecha a izquierda.
- title: se utiliza para proporcionar información adicional sobre el elemento <figcaption>, que puede ser mostrada en un tooltip cuando el cursor se sitúa sobre el elemento.
Es importante tener en cuenta que la etiqueta <figcaption> no tiene atributos específicos que afecten al formato o al contenido de la leyenda o descripción. Esto se debe definir a través de estilos CSS o del contenido textual que se incluya dentro del elemento <figcaption>.
Más ejemplos
Aquí te proporciono dos ejemplos completos y avanzados de la etiqueta <figcaption> de HTML5:
Ejemplo 1:
En este ejemplo, se utiliza la etiqueta <figure> para incluir una imagen y su leyenda correspondiente. La leyenda se crea mediante la etiqueta <figcaption> y se aplica un estilo CSS personalizado para dar formato al texto.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta figcaption en HTML5</title>
<style>
figcaption {
font-style: italic;
font-size: 14px;
text-align: center;
color: #999;
margin-top: 10px;
}
</style>
</head>
<body>
<figure>
<img src="imagen.jpg" alt="Imagen de ejemplo">
<figcaption>Esta es una imagen de ejemplo con una leyenda en itálica y centrada.</figcaption>
</figure>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se ha creado un estilo CSS personalizado para el elemento <figcaption>, que le da un aspecto itálico y lo centra horizontalmente.
Ejemplo 2:
En este ejemplo, se utiliza la etiqueta <figure> para incluir un video de YouTube y su descripción correspondiente. La descripción se crea mediante la etiqueta <figcaption> y se utiliza el atributo “lang” para especificar que el idioma es español.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta figcaption en HTML5</title>
</head>
<body>
<figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="Video de ejemplo" frameborder="0" allowfullscreen></iframe>
<figcaption lang="es">Este es un video de ejemplo que muestra cómo utilizar la etiqueta <figcaption> para incluir una descripción en HTML5.</figcaption>
</figure>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se ha utilizado un video de YouTube como elemento <iframe> dentro de la etiqueta <figure>. La descripción se ha creado mediante la etiqueta <figcaption> y se ha especificado que el idioma es español utilizando el atributo «lang».
Soporte en los navegadores:
- Google Chrome 8.0
- Edge 12.0
- Internet Explorer 9.0
- Firefox 4.0
- Opera 11.1
- Safari 5.0
Fuente: https://oregoom.com/html/figcaption/
