<figure>, <figcaption>

<figure> agrupa un contenido autocontenido — una imagen, un diagrama, un bloque de código, una cita — junto con su pie de figura (<figcaption>), formando una unidad semántica que el navegador, los buscadores y los lectores de pantalla reconocen como un todo. El elemento le dice al documento: este contenido y esta descripción van juntos y pueden moverse como bloque sin perder su sentido.

La palabra clave es autocontenido: <figure> no es un contenedor genérico como <div>. Es para contenido que, si lo movieras a un apéndice o a otro lugar del documento, seguiría teniendo sentido completo — la imagen no pierde su referencia y el texto que la acompaña no pierde su ancla. Un <figure> sin <figcaption> es válido (el pie es opcional), pero lo más frecuente es usar los dos juntos.

Antes de <figure>, la práctica habitual era poner un <img> seguido de un <p> o un <span> con el pie de foto. Esa estructura es visualmente idéntica pero semánticamente opaca: el párrafo no sabe que describe a esa imagen en particular. <figure> + <figcaption> declara esa relación en el HTML, para que cualquier herramienta que lea el documento la pueda aprovechar.

Cómo funciona

El navegador no aplica ningún estilo especial a <figure> por defecto (más allá de un margin en algunos contextos). Su valor no es visual: es semántico. Lo que hace es declarar que los hijos forman una unidad de contenido referenciada, igual que <blockquote> declara una cita.

<figcaption> debe ser el primer o último hijo de <figure>. No puede ir en el medio ni anidado dentro de otro elemento del <figure>. Un <figcaption> fuera de un <figure> pierde toda su semántica.

El contenido principal de <figure> (la imagen, el bloque de código, etc.) puede ser cualquier contenido de flujo. Lo más común es <img>, pero también son válidos <pre><code>, <table>, o incluso <blockquote>.

Modelo de contenido

• <figure>: elemento de contenido de flujo (flow content). Puede ir en cualquier lugar donde se admita contenido de flujo: dentro de <article>, <section>, <main>, <div>, etc. Contiene contenido de flujo más, opcionalmente, un <figcaption> como primer o último hijo. Display por defecto: bloque.
• <figcaption>: contenido en línea y de flujo. Solo válido como hijo directo de <figure>. Display por defecto: bloque.

Sintaxis

<!-- Patrón básico: imagen con pie de foto -->
<figure>
  <img src="paisaje.jpg" alt="Montañas nevadas al atardecer">
  <figcaption>Cordillera de los Andes, Argentina, 2024.</figcaption>
</figure>

<!-- figcaption también puede ir primero -->
<figure>
  <figcaption>Listado 1: función de saludo en JavaScript.</figcaption>
  <pre><code>function saludar(nombre) {
  return `Hola, ${nombre}!`;
}</code></pre>
</figure>

Atributos

<figure> y <figcaption> no tienen atributos propios. Aceptan los atributos globales de HTML (class, id, style, lang, etc.).

id en <figure> (patrón frecuente)

Aunque no es un atributo propio, es común dar un id al <figure> para referenciarlo desde el texto del artículo:

<p>Como se ve en la <a href="#fig-diagrama">figura 1</a>, el flujo es lineal.</p>

<figure id="fig-diagrama">
  <img src="diagrama.svg" alt="Diagrama de flujo lineal">
  <figcaption>Figura 1: flujo de datos en el sistema.</figcaption>
</figure>

Accesibilidad

<figure> tiene el rol implícito figure. Los lectores de pantalla anuncian el comienzo del <figure> y, cuando encuentran el <figcaption>, lo asocian al elemento como su nombre accesible (etiqueta). Esto permite que el usuario navegue directamente a las figuras de la página.

Cuando la imagen dentro del <figure> ya tiene un alt descriptivo y el <figcaption> agrega contexto adicional, no hay redundancia: el alt describe qué se ve; el <figcaption> agrega contexto editorial (dónde, cuándo, por qué). Son complementarios.

Si el <figcaption> ya describe completamente la imagen para un usuario sin visión, podés considerar alt="" en el <img> (imagen decorativa respecto al caption). Pero solo si el caption es realmente suficiente por sí solo.

Cuándo usar qué

La regla práctica: si el contenido tiene una leyenda, atribución, o pie que lo acompaña y lo identifica, usá <figure>. Si es solo una imagen sin texto asociado, <img> alcanza.

Notas, gotchas e interacción

• <figcaption> fuera de <figure> no tiene semántica. El navegador lo renderiza como texto suelto pero los lectores de pantalla no lo asocian a ninguna figura. Siempre dentro.
• alt y <figcaption> son complementarios, no intercambiables. El alt es para usuarios sin imagen (lector de pantalla, imagen rota). El <figcaption> es visible para todos. Podés tener los dos con información diferente.
• <figure> no es <section>. No envuelvas el artículo completo en un <figure>. Es para contenido autocontenido y referenciable, no para estructura de página.
• Cicatriz de este sitio (A.0.5): dentro del sandbox las imágenes deben ser SVG inline o data-URI. La imagen del ejemplo de arriba usa una data-URI de SVG; en producción iría la ruta real del archivo.
• <figure> puede no tener <figcaption>. Es válido usar <figure> solo (sin pie) para marcar que el contenido es autocontenido y referenciable, aunque sea raro en la práctica.

Vigente / legacy

<figure> y <figcaption> son elementos HTML5; no tienen equivalente en HTML4. Antes de HTML5 la práctica era <div class="figura"> con CSS para la presentación y sin semántica real. Hoy esa práctica es legacy: preferí siempre <figure> + <figcaption>.

No hay atributos deprecated propios de estos elementos.

Aprendelo en el recorrido

Esta entrada complementa la lección <figure> y <figcaption> del módulo Imágenes y medios, donde se practica la estructura básica con un ejercicio.

Ver también

• img — incrustar imágenes; el contenido más frecuente de <figure>
• video — video incrustado, también válido dentro de <figure>
• audio — audio incrustado