Etiqueta HTML <figure>
La etiqueta <figure> incluye imágenes, diagramas e ilustraciones. Descripción de la etiqueta, atributos y ejemplos.
La etiqueta <figure> marca contenido autónomo — una unidad que se referencia desde el flujo principal del documento pero que es completa por sí misma. Comúnmente contiene una imagen, pero también puede envolver un diagrama, una ilustración, un listado de código, una cita o una tabla.
La etiqueta <figure> es uno de los elementos HTML5.
Qué significa "contenido autónomo"
Un fragmento de contenido es "autónomo" cuando podría moverse a otro lugar — a una barra lateral, un apéndice o la página siguiente — sin cambiar el significado del texto que lo rodea. El cuerpo del texto puede decir "ver la figura a continuación", pero la figura en sí no tiene que estar exactamente en ese lugar para tener sentido.
Esta es la razón principal para elegir <figure> en lugar de un simple <img>:
- Semántica, no solo diseño.
<figure>le indica al navegador y a la tecnología de asistencia "esto es una ilustración independiente y referenciada," mientras que un<img>simple es solo una imagen en línea dentro del texto. - Agrupa el contenido con su pie de foto. Un
<figure>vincula una imagen (o código, o cita) a su descripción para que viajen juntos como un bloque lógico. - Tratamiento por lectores de pantalla. Muchos lectores de pantalla anuncian un
<figure>como una región de figura distinta y leen su<figcaption>como la etiqueta de la figura, de modo que los usuarios escuchan la explicación vinculada directamente al contenido visual.
Si una imagen es puramente decorativa o fluye en línea como parte de una oración, un <img> simple está bien — use <figure> cuando el contenido sea una unidad referenciada con pie de foto.
Agregar un pie de foto con <figcaption>
Para etiquetar o explicar la figura, anide un elemento <figcaption> dentro de <figure>. Debe ser el primer o último hijo del <figure> — el primero para mostrar el pie de foto sobre el contenido, el último para mostrarlo debajo.
Un <figure> puede contener como máximo un <figcaption>.
Sintaxis
La etiqueta <figure> se usa en pares. El contenido se escribe entre las etiquetas de apertura (<figure>) y cierre (</figure>).
Ejemplo: <figure> con <figcaption>
Este es el uso más común — una imagen junto con un pie de foto:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The Eiffel Tower at sunset (see Figure 1).</p>
<figure>
<img
src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"
alt="The Eiffel Tower silhouetted against an orange sky"
width="250"
height="200"
/>
<figcaption>Figure 1. The Eiffel Tower at sunset.</figcaption>
</figure>
</body>
</html>Ejemplo: un listado de código
Un <figure> es un contenedor natural para un ejemplo de código referenciado. El pie de foto puede nombrar el listado:
<figure>
<figcaption>Listing 1. A minimal HTML page.</figcaption>
<pre><code><!DOCTYPE html>
<html>
<head><title>Hello</title></head>
<body>Hello, world!</body>
</html></code></pre>
</figure>Consulte <pre> y <code> para dar formato al código.
Ejemplo: una cita
Una cita destacada que se referencia desde el texto puede ser una figura, con la fuente en el pie de foto:
<figure>
<blockquote>
<p>The only way to do great work is to love what you do.</p>
</blockquote>
<figcaption>— Steve Jobs</figcaption>
</figure>Consulte <blockquote> para marcar citas.
Ejemplo: una tabla
Los datos tabulares referenciados como figura también pueden envolverse:
<figure>
<figcaption>Table 1. Browser market share.</figcaption>
<table>
<tr><th>Browser</th><th>Share</th></tr>
<tr><td>Chrome</td><td>65%</td></tr>
<tr><td>Safari</td><td>19%</td></tr>
</table>
</figure>Consulte <table> para construir tablas.
La diferencia entre <figure> y <aside>
Ambos elementos agrupan contenido relacionado, pero responden a preguntas diferentes.
<figure>contiene contenido que forma parte del flujo principal — el documento hace referencia a él ("como se muestra en la Figura 1"). Eliminarlo dejaría una referencia colgante. Úselo para imágenes, diagramas, listados de código y citas a las que apunta el texto.<aside>contiene contenido tangencial — barras laterales, enlaces relacionados, citas destacadas o unidades publicitarias. El texto principal se lee perfectamente aunque se elimine el aside, porque nada en el cuerpo hace referencia a él.
Contraste concreto: un diagrama con pie de foto "Figura 2: ciclo de vida de la solicitud" que el artículo analiza es un <figure>. Una lista de "Artículos relacionados" junto al mismo párrafo es un <aside>.
Accesibilidad
<figure>tiene un rol ARIA implícito defigure; no es necesario agregarrole="figure"manualmente.- Cuando está presente, un
<figcaption>visible actúa como el nombre accesible (etiqueta) de la figura, de modo que los usuarios de lectores de pantalla reciben la explicación vinculada al contenido. Prefiera un<figcaption>real en lugar dearia-labelpara que los usuarios videntes y no videntes vean el mismo texto. - Para las imágenes, el texto
altdel<img>y el<figcaption>tienen propósitos diferentes:altdescribe la imagen para los usuarios que no pueden verla, mientras que el pie de foto añade contexto para todos. Evite repetir exactamente las mismas palabras en ambos.
Atributos
La etiqueta <figure> admite los Atributos Globales y los Atributos de Evento.