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, tal como se especifica en los dos párrafos siguientes.

Su uso más frecuente es que permite almacenar una imagen en su interior: <figure><img /> </figure>. Es una mejor práctica comparada con usar solamente un contenedor div. Como complemento al contenedor figure, se utiliza la etiqueta figcaption <figcaption></figcaption>, que permite proporcionar una leyenda o descripción para el contenido multimedia, como el autor, fuente o algo por el estilo, que se mostrará usualmente abajo de la imagen.

Pero, es importante considerar que la etiqueta figure no es únicamente para imágenes: El elemento HTML <figure> representa contenido independiente, a menudo con un título. Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, videos, audio, cualquier otro contenido que se desee destacar, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal

Como bien sa sabe, utilizar div ya es mala práctica . Gracias a la semántica de HTML5 podemos emplear figure para asignarle un contenedor a nuestra imagen

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.

Sintaxis:

<figure>  Contenido de la imagen...  </figure>

Aporte semántico al HTML5

Como bien sa sabe, utilizar div ya es mala práctica . Gracias a la semántica de HTML5 podemos emplear figure para asignarle un contenedor a nuestra imagen. Anteriormente el procedimiento (hoy obsoleto y desechado) era:

<div> <img src="Image/img.jpg" alt="Image of a laptop"> <p> Aquí la imagen de una laptop. </p> </div>

La manera correcta se define con el siguiente código:

<figure> <img src="Image/img.jpg" alt="Image of a laptop"> <figcaption>Here is a image of laptop.</figcaption> </figure>

¡Se ve la diferencia! Como puedes notar, no he usado ninguna propiedad de estilo en el código, aún así hay una diferencia en la alineación de la imagen y el título, la etiqueta de figura es responsable de todo esto. Pero aparte de los cambios de estilo y alineación predeterminados que proporciona la etiqueta de figura, la principal ventaja que tiene es que también permite que varios programas de computadora comprendan mejor su contenido. Para un humano, es bastante fácil diferenciar entre un párrafo y una imagen, pero para las máquinas, no es lo mismo. Por máquinas, me refiero al motor de búsqueda de Google o incluso a su navegador web.

El objetivo detrás de la semántica es hablar con estas máquinas e indicarles qué parte del documento HTML5 transmite qué. En el primer caso de nuestro ejemplo con la etiqueta div, mientras seguían esas instrucciones, los programas de computadora no obtuvieron idea de lo que había debajo de esa etiqueta div. Podemos incrustar cualquier cosa bajo la etiqueta div, ¿cómo se supone que nuestro navegador web lo sepa? Pero en el segundo caso, con la etiqueta figure en lugar de la etiqueta div, le dice al navegador web que se va a incrustar una imagen debajo de esta etiqueta.

Supongamos que tiene un montón de imágenes en un documento HTML, puede usar una etiqueta de figura para anidar todas esas imágenes dentro de esa etiqueta de figura.

Sólo un <figcaption> puede estar anidado dentro de un <figure>, aunque <figure> en sí puede contener muchos otros elementos secundarios, ya sea un bloque de código, imágenes o audios.

Todo es cuestión de semántica en el desarrollo web moderno. Entonces, cualquier etiqueta que elija debe satisfacer el requisito semántico del contenido. Lo mismo se aplica también a la etiqueta de figure. Como se señalo antes, la etiqueta de </figure> se usa para alinear el contenido semánticamente, y lo que no podemos visualizar a simple vista es que ayuda a las máquinas a comprender mejor su contenido, que es el objetivo detrás de la semántica. Por lo que existen una gran cantidad de lugares donde se puede utilizar este elemento, pero se debe tener especial cuidado en que sea el elemento adecuado para el trabajo.

Mejores detalles lo lees acá (en inglés): https://www-learningjournal-guru.translate.goog/article/

Hasta la aparición de HTML5 no era posible dar ningún carácter semántico a este tipo de elementos, ya que por ejemplo para un motor de búsqueda una imagen y la leyenda que la acompaña no tienen relación alguna. Además, y desde el punto de vista de diseño, debemos usar elementos adicionales para conseguir que la leyenda nos quede ajustada al elemento que queremos darle significado.

Las etiquetas </figure> y </figcaption>, vienen resolver estos problemas. En el aspecto semántico, al crear una figura que contiene una leyenda, este texto queda unido a dicha figura, aportándole un valor semántico. En cuanto a diseño, una leyenda se coloca bien arriba a la izquierda o abajo a la izquierda (según la situemos en el código) de la figura que hayamos creado, lo que simplifica el marcado HTML y también el CSS para lograr tal posicionamiento.

Mejores detalles lo lees acá: http://www.hexagonalalien.es/

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.).