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 &lt;figure&gt;</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.

Curso de HTML Desde Cero

Inscríbete Ahora