HTML
Cómo agrupar imágenes, diagramas, código u otros contenidos autocontenidos con figure y relacionarlos con una descripción mediante figcaption.
representa contenido autocontenido relacionado con el texto principal, y proporciona su caption.
figurefigcaption<figure>
<img src="architecture.svg" alt="Diagrama de componentes del sistema">
<figcaption>Arquitectura general de DomiSys.</figcaption>
</figure>Puede contener:
<figure>
<pre><code>const total = price * quantity;</code></pre>
<figcaption>Cálculo básico del subtotal.</figcaption>
</figure>Debe ser el primer o último hijo de figure.
<figure>
<figcaption>Resultado de la encuesta.</figcaption>
<img src="survey.svg" alt="...">
</figure>O:
<figure>
<img src="survey.svg" alt="...">
<figcaption>Resultado de la encuesta.</figcaption>
</figure>No cumplen la misma tarea.
<figure>
<img
src="dashboard.webp"
alt="Panel con ventas del día, pedidos activos y stock bajo"
>
<figcaption>Dashboard principal de DomiSys.</figcaption>
</figure>Evita repetir exactamente el mismo texto.
Si una imagen es puramente decorativa y no necesita caption, probablemente no necesita figure.
<img src="background-shape.svg" alt="">Figure no vuelve semántico cualquier recurso visual.
<figure>
<blockquote>
<p>La accesibilidad es una cualidad del producto.</p>
</blockquote>
<figcaption>— Equipo de diseño</figcaption>
</figure>Figcaption puede ofrecer una atribución visible. El elemento cite se reserva para títulos de obras, no nombres de personas.
<figure>
<table>
<caption>Ventas por trimestre</caption>
...
</table>
<figcaption>Datos consolidados del año fiscal.</figcaption>
</figure>Table caption nombra o describe la tabla; figure caption contextualiza la figura completa. Usar ambos puede ser redundante si no aportan información diferente.
<p>La arquitectura separa dominio e infraestructura (figura 1).</p>
<figure id="architecture-figure">
...
<figcaption>Figura 1. Capas principales.</figcaption>
</figure>El ID permite enlazar:
<a href="#architecture-figure">Ver figura 1</a>Figcaption puede contribuir al nombre accesible de figure. No añadas aria-label que oculte o reemplace contenido visible sin una razón.
<figure>
<img src="before.webp" alt="Interfaz anterior">
<img src="after.webp" alt="Interfaz actualizada">
<figcaption>Comparación antes y después del rediseño.</figcaption>
</figure>Una caption puede describir el conjunto.
<figure>
<video controls preload="metadata">
<source src="domisys-demo.webm" type="video/webm">
<track
kind="captions"
src="domisys-demo-es.vtt"
srclang="es"
label="Español"
default
>
</video>
<figcaption>Recorrido por los flujos de administrador y cliente.</figcaption>
</figure>¿Por qué una imagen decorativa normalmente no necesita figure?
Porque no forma una unidad de contenido autocontenida ni necesita una caption; figure añadiría una relación semántica inexistente.
Audio, video, source y track integra medios con controles y alternativas.