HTML figure y figcaption: agrupar contenido y colocar leyendas

HTML <figure> agrupa contenido autónomo como ilustraciones, gráficos o código en una sola unidad, y <figcaption> proporciona su leyenda. Coloca un único figcaption como el primer o último hijo de figure; omítelo cuando no se necesite leyenda.

¿figure sirve solo para imágenes?

Puedes usar figure para fotografías, ilustraciones, gráficos, ejemplos de código o citas a las que el texto se refiera como un solo elemento. Usa div cuando solo necesites un contenedor de estilo, y evita envolver toda una sección relacionada en figure. Usar este elemento no verifica automáticamente los derechos de autor o la fuente del material.

figcaption describe el resto del contenido de su elemento padre directo figure. Debe permanecer dentro de figure, con un máximo de un figcaption por figure. Si necesitas explicaciones para la parte superior y la inferior, reúnelas en un único figcaption.

Ejemplo completo: coloca el leyenda primero o al final

Guarda el siguiente código como figures.html y ábrelo en un navegador. El ejemplo dibuja formas simples con SVG (Gráficos Vectoriales Escalables) para que funcione sin archivos de imagen separados. El primer elemento tiene su leyenda antes del gráfico; el segundo la tiene después del gráfico.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar posiciones de leyendas de figure</title>
  <style>
    figure { margin: 1rem 0; max-width: 20rem; }
    svg { display: block; width: 100%; height: auto; }
    figcaption { padding: 0.5rem 0; }
  </style>
</head>
<body>
  <h1>Comparación de dos formas</h1>
  <figure>
    <figcaption>Figura A. Círculo azul</figcaption>
    <svg viewBox="0 0 240 120" role="img" aria-label="Círculo azul centrado sobre un fondo claro">
      <rect width="240" height="120" fill="#f0f3f5" />
      <circle cx="120" cy="60" r="36" fill="#176e96" />
    </svg>
  </figure>
  <figure>
    <svg viewBox="0 0 240 120" role="img" aria-label="Cuadrado naranja centrado sobre un fondo claro">
      <rect width="240" height="120" fill="#f0f3f5" />
      <rect x="84" y="24" width="72" height="72" fill="#b35a12" />
    </svg>
    <figcaption>Figura B. Cuadrado naranja</figcaption>
  </figure>
</body>
</html>

«Figura A. Círculo azul» aparece encima del círculo y «Figura B. Cuadrado naranja» debajo del cuadrado. Al estrechar la ventana, el SVG se reduce al ancho de figure. Compara las posiciones moviendo figcaption al principio o al final de figure, sin sacarlo de este elemento.

Las leyendas y el texto alternativo de las imágenes tienen roles diferentes

Un figcaption puede contener un título, explicación o fuente visibles para todos los lectores. El alt de una imagen proporciona contenido alternativo para los lectores que no pueden ver la imagen. No dejes automáticamente vacío el alt de una imagen importante porque exista un pie de foto, ni dupliques cada palabra de la explicación en ambos lugares.

El ejemplo utiliza SVG en lugar de img, por lo que proporciona descripciones de las formas con role y aria-label. Para una fotografía insertada con img, especifica src y alt junto con las dimensiones necesarias. Si un gráfico comunica comparaciones numéricas, considera si un pie de foto corto es suficiente y proporciona sus datos clave también en el texto o en una tabla.

El elemento figure no genera automáticamente leyendas ni números de figuras, y sus márgenes predeterminados dependen del navegador y del CSS. Si necesitas numeración, mantenla coherente con las referencias del documento. Las referencias de figure en MDN y de figcaption en MDN explican las reglas detalladas de los elementos.