Etiqueta figure en HTML
La etiqueta <figure> es una de las etiquetas introducidas en HTML5 y se utiliza para incluir elementos multimedia en una página web, como imágenes, videos, audio u otro contenido que se desee destacar.
La etiqueta <figure> se utiliza para agrupar y etiquetar el contenido multimedia, y se utiliza junto con la etiqueta <figcaption> para proporcionar una leyenda o descripción para el contenido multimedia.
Ejemplo de uso
Aquí hay un ejemplo de cómo se utiliza la etiqueta <figure> con la etiqueta <figcaption>:
<figure>
<img src="imagen.jpg" alt="Descripción de la imagen">
<figcaption>Esta es una imagen de una playa hermosa</figcaption>
</figure>
Lenguaje del código: HTML, XML (xml)En este ejemplo, la etiqueta <figure> envuelve la imagen y la etiqueta <figcaption> proporciona una descripción para la imagen.
La etiqueta <figure> también se puede utilizar con otros tipos de contenido multimedia, como videos y audio. Además, la etiqueta <figure> se puede utilizar para agregar contenido multimedia responsivo a una página web, lo que significa que el contenido se adaptará a diferentes tamaños de pantalla y dispositivos.
Atributos
La etiqueta <figure> tiene algunos atributos que se pueden utilizar para mejorar la accesibilidad y la presentación de la información en la página web.
Aquí están algunos de los atributos más comunes:
- id: permite identificar un elemento único en la página web para su posterior manipulación con JavaScript o CSS.
- class: se utiliza para asignar una o varias clases CSS al elemento.
- style: se utiliza para aplicar estilos CSS directamente al elemento.
- title: se utiliza para proporcionar información adicional sobre el contenido multimedia cuando se pasa el cursor sobre él.
- lang: se utiliza para especificar el idioma del contenido.
- dir: se utiliza para especificar la dirección de lectura del contenido.
- tabindex: se utiliza para especificar el orden de tabulación del elemento.
- role: se utiliza para especificar el papel del elemento en la página web para mejorar la accesibilidad.
Es importante recordar que la etiqueta <figure> debe ser utilizada para agrupar contenido multimedia y la etiqueta <figcaption> debe ser utilizada para proporcionar una leyenda o descripción para ese contenido.
Estos elementos trabajan juntos para proporcionar una presentación clara y accesible del contenido multimedia en la página web.
Ejemplo:
Aquí tienes un ejemplo de cómo utilizar la etiqueta <figure> con algunos de sus atributos más comunes:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta <figure></title>
</head>
<body>
<figure id="mi-figura" class="imagen-destacada" style="border: 1px solid black;">
<img src="imagen.jpg" alt="Descripción de la imagen" title="Imagen de una playa hermosa" width="400">
<figcaption lang="es" dir="ltr">Esta es una imagen de una playa hermosa</figcaption>
</figure>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado los siguientes atributos:
- id: hemos asignado un id “mi-figura” al elemento <figure> para poder manipularlo más tarde con CSS o JavaScript.
- class: hemos asignado la clase “imagen-destacada” al elemento <figure> para aplicar estilos CSS específicos.
- style: hemos aplicado un borde al elemento <figure> utilizando estilos CSS directamente en el atributo style.
- img: hemos utilizado el atributo width para establecer un ancho de 400 píxeles para la imagen.
- figcaption: hemos utilizado el atributo lang para especificar que la descripción está en español y el atributo dir para indicar la dirección de lectura (izquierda a derecha).
Recuerda que los atributos que se utilizan en la etiqueta <figure> dependerán de las necesidades específicas de tu sitio web.
Más ejemplos
Aquí te dejo dos ejemplos más avanzados de cómo utilizar la etiqueta <figure> en HTML5.
Ejemplo 1: Galería de imágenes con leyendas y estilo avanzado
<!DOCTYPE html>
<html>
<head>
<title>Galería de imágenes</title>
<style>
figure {
display: inline-block;
margin: 10px;
border: 1px solid #ccc;
padding: 5px;
background-color: #f8f8f8;
border-radius: 5px;
box-shadow: 1px 1px 5px #ccc;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
figcaption {
font-style: italic;
color: #777;
margin-top: 5px;
}
</style>
</head>
<body>
<h1>Galería de imágenes</h1>
<figure>
<img src="imagen1.jpg" alt="Imagen 1">
<figcaption>Esta es la imagen 1</figcaption>
</figure>
<figure>
<img src="imagen2.jpg" alt="Imagen 2">
<figcaption>Esta es la imagen 2</figcaption>
</figure>
<figure>
<img src="imagen3.jpg" alt="Imagen 3">
<figcaption>Esta es la imagen 3</figcaption>
</figure>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos creado una galería de imágenes con estilo avanzado. Hemos utilizado CSS para dar estilo a la etiqueta <figure>, estableciendo un borde, un fondo, una sombra y un margen.
También hemos utilizado CSS para establecer el ancho máximo de la imagen en un 100% y la altura en automático. Además, hemos utilizado la etiqueta <figcaption> para proporcionar una leyenda para cada imagen.
Ejemplo 2: Video embebido con leyenda y atributos avanzados
<!DOCTYPE html>
<html>
<head>
<title>Video embebido</title>
</head>
<body>
<h1>Video embebido</h1>
<figure>
<video src="video.mp4" controls preload="metadata" poster="poster.jpg" width="640">
Tu navegador no admite la etiqueta de video.
</video>
<figcaption>Este es un video embebido</figcaption>
</figure>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <video> en lugar de la etiqueta <img> para mostrar un video embebido. Hemos utilizado algunos atributos avanzados, como:
- src: se utiliza para especificar la URL del archivo de video.
- controls: se utiliza para mostrar los controles de video (reproducción, pausa, volumen, etc.).
- preload: se utiliza para especificar cómo se debe cargar el video. En este caso, hemos establecido el valor “metadata” para cargar solo la información de metadatos (duración, tamaño, etc.).
- poster: se utiliza para especificar una imagen que se mostrará antes de que se cargue el video.
- width: se utiliza para establecer el ancho del video.
También hemos utilizado la etiqueta <figcaption> para proporcionar una leyenda para el video.