acerca de HTML

Referencia de etiquetas

Etiqueta figure en HTML: figuras y contenido autónomo

La etiqueta <figure> agrupa contenido autocontenido, como una imagen, un gráfico o un ejemplo de código, con un pie opcional escrito en <figcaption>. Sirve para tratar ese contenido como una unidad identificable dentro de una página. Úsala, por ejemplo, cuando un tutorial explique un diagrama y necesites mantener juntos el dibujo y su explicación.

Ejemplo mínimo: una imagen y su pie

Descarga el diagrama de entrada, proceso y salida y guárdalo como flujo.svg junto a tu archivo HTML. Es una ilustración propia del sitio que puedes utilizar para practicar. Inserta este fragmento dentro del cuerpo de un documento HTML con codificación UTF-8:

<figure>
  <img src="flujo.svg"
       alt="Flujo de tres etapas: entrada, proceso y salida"
       width="600" height="240">
  <figcaption>Diagrama del recorrido de los datos.</figcaption>
</figure>

Verás tres recuadros unidos por flechas y, debajo, el pie «Diagrama del recorrido de los datos». La imagen y su pie constituyen una figura identificable. El atributo alt describe el recorrido; el pie explica el tema del conjunto.

La etiqueta no dibuja las flechas ni carga el archivo: eso corresponde a <img> y a su src. Si no aparece, comprueba el nombre y la carpeta del SVG. Sin CSS adicional, su ancho declarado puede superar una ventana pequeña; el ejemplo práctico muestra cómo adaptarlo.

Sintaxis y contexto válido

Escribe <figure>…</figure> con apertura y cierre: ninguna de las dos etiquetas se puede omitir. El elemento pertenece al contenido de flujo y se admite donde el padre permita ese contenido, por ejemplo dentro de <article>, <section> o <div>. No lo insertes dentro de un <p>, que admite contenido de frase.

Su interior acepta contenido de flujo, respetando las restricciones de cada hijo. Puede reunir imágenes, párrafos, una tabla o un listado de código; no exige una imagen. Admite como máximo un <figcaption> hijo directo, situado como primer o último elemento hijo. El pie es opcional: una figura sin él también es válida. Estas reglas se detallan en el modelo de contenido de <figure> del HTML Living Standard.

Si agrupas dos imágenes como una sola figura, coloca el pie antes de ambas o después de ambas. Ponerlo entre ellas incumple ese modelo. Cada imagen conserva su propia alternativa textual.

Cuándo un contenido es una figura

Piensa en una unidad que puedas identificar y comentar desde el texto:

  • Una imagen o un diagrama: el recorrido de los datos del primer ejemplo se entiende como un conjunto completo.
  • Un listado de código: un fragmento con un pie que indique qué técnica demuestra.
  • Un gráfico: sus barras y su explicación forman una unidad a la que puedes referirte como «Figura 1».

Autocontenido no significa que deba entenderse totalmente fuera del artículo. Significa que forma una unidad, en vez de ser una pieza inseparable de una frase, como un pequeño icono intercalado entre palabras. Una imagen decorativa tampoco necesita convertirse en figura por tener un borde.

Identificarla por nombre o número ayuda a moverla a otro lugar sin perder la referencia. «Consulta la Figura 1» conserva el sentido si cambia el diseño; «mira la imagen de arriba» puede dejar de ser cierto. HTML no numera figuras automáticamente.

Figure y figcaption frente a div

<figure> expresa que sus contenidos forman una figura; <figcaption> asocia el pie a ese conjunto. Un <div> es un contenedor genérico: puede agrupar los mismos elementos para aplicar CSS, pero no expresa esa relación. Consulta las guías de <figcaption> para escribir el pie y de <div> para agrupaciones sin significado propio.

No uses <figure> para cualquier tarjeta visual. Un panel con campos y botones no se convierte en una figura por estar dentro de una caja. Una cita extensa puede formar una figura con su atribución como pie, pero la cita sigue marcada con <blockquote>.

Si sustituyes <figure> por <div>, debes convertir también <figcaption> en un elemento apropiado, como <p>. El texto y la imagen pueden seguir visibles, aunque se pierde la semántica de figura y pie. Los márgenes pueden cambiar: la apariencia predeterminada y el significado son cuestiones distintas.

Ejemplo práctico: un listado y un gráfico relacionados

Descarga el gráfico de participación como participacion.svg junto a este documento, guardado como figuras.html. La ilustración es propia y contiene datos ficticios: HTML, 12 asistentes; CSS, 8; JavaScript, 4. Puedes abrir el archivo directamente en el navegador; no necesita servidor ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Figuras en un informe de talleres</title>
    <style>
      body {
        max-width: 42rem;
        margin: 2rem auto;
        padding: 0 1rem;
        font-family: sans-serif;
        line-height: 1.5;
      }

      .informe { margin: 2rem 0; }
      .informe img { display: block; max-width: 100%; height: auto; }
      .informe pre { padding: 1rem; background: #eef3f8; }
      .informe code { white-space: pre-wrap; overflow-wrap: anywhere; }
      .informe figcaption { padding-block: 0.75rem; }
      a:focus-visible { outline: 3px solid #174e9c; outline-offset: 3px; }
    </style>
  </head>
  <body>
    <h1>Informe de talleres</h1>
    <p>
      El <a href="#listado-asistentes">Listado 1</a> muestra cómo
      escribir los datos en HTML. La
      <a href="#figura-participacion">Figura 1</a> permite compararlos.
    </p>

    <figure id="listado-asistentes" class="informe">
      <pre><code>&lt;ul&gt;
  &lt;li&gt;HTML: 12 asistentes&lt;/li&gt;
  &lt;li&gt;CSS: 8 asistentes&lt;/li&gt;
  &lt;li&gt;JavaScript: 4 asistentes&lt;/li&gt;
&lt;/ul&gt;</code></pre>
      <figcaption>
        Listado 1. Una lista sin orden de prioridad presenta los datos.
      </figcaption>
    </figure>

    <figure id="figura-participacion" class="informe">
      <img src="participacion.svg"
           alt="Asistentes por taller: HTML, 12; CSS, 8; JavaScript, 4."
           width="600" height="240">
      <figcaption>
        Figura 1. HTML reúne el triple de asistentes que JavaScript.
        Ilustración propia con datos ficticios.
      </figcaption>
    </figure>
  </body>
</html>
  1. Abre figuras.html: aparecerá el código de una lista como texto, seguido de su pie. <pre> conserva espacios y saltos; <code> identifica código. Los escapes &lt; y &gt; evitan que ese fragmento se interprete como una lista real. La guía de <code> explica esos escapes.
  2. Observa el gráfico: las barras muestran 12, 8 y 4; el pie destaca que 12 es el triple de 4. El alt aporta los valores completos y el pie añade contexto y procedencia.
  3. Usa Tab para seleccionar cada enlace y Enter para llegar a la figura correspondiente. Los id permiten esos destinos; escribir «Figura 1» en el pie no crea el enlace por sí solo.
  4. Reduce la ventana: el gráfico se ajusta con CSS y el código puede partir líneas. Desactiva JavaScript: el informe y sus enlaces siguen funcionando.

Cambiar el pie modifica la explicación, sin cambiar los datos del SVG ni el alt. Retirar únicamente el pie deja una figura válida sin leyenda. Retirar el envoltorio <figure> exige retirar o cambiar también <figcaption>; el código y la imagen pueden permanecer, pero dejan de estar agrupados como figuras.

Atributos y accesibilidad

<figure> solo tiene atributos globales, como id, class y lang; no tiene src ni alt propios. En los ejemplos, src, alt, width y height pertenecen a <img>. margin y max-width son propiedades CSS. En JavaScript, el elemento usa la interfaz DOM HTMLElement, sin una API especial que dibuje o numere figuras.

¿Figcaption sustituye a alt? No automáticamente. El pie contextualiza el conjunto y alt aporta la alternativa de la imagen. En una imagen informativa, conserva una alternativa adecuada: «Figura 1» no comunica los valores del gráfico. Un alt="" corresponde a una imagen decorativa o redundante según su contexto, no al simple hecho de tener pie. La guía de imágenes informativas de W3C WAI explica cómo elegir esa información.

La agrupación nativa no necesita role="figure" añadido. Mantén visibles los pies y comprensibles los datos; el anuncio concreto depende del navegador y del lector de pantalla. No dependas solo del color de las barras para comunicar sus valores.

Errores frecuentes y preguntas

  • Varios pies o un pie intermedio: reúne la explicación en un solo <figcaption>, primero o último, directamente dentro de la figura.
  • Omitir alt porque hay un pie: revisa la información y la función de cada imagen por separado.
  • Esperar que la figura flote: <figure> no aplica float, centrado, bordes ni numeración automáticos. El posicionamiento se decide con CSS.
  • Usarla solo para obtener márgenes: si necesitas un contenedor para estilos, considera <div>.

¿Figure solo contiene imágenes? No. El listado del ejemplo no contiene ninguna; gráficos, tablas y otros contenidos autocontenidos también pueden formar figuras.

¿Necesita siempre figcaption? No. Añádelo cuando un título o una explicación ayuden a identificar el conjunto; la figura puede existir sin pie.

Compatibilidad y fuentes

Revisión: 4 de octubre de 2026. <figure> está ampliamente disponible en los navegadores actuales, según MDN. Los ejemplos usan HTML y CSS habituales; no dependen de una API experimental. El soporte del elemento no garantiza una presentación idéntica ni el mismo anuncio en todas las tecnologías de asistencia.