El elemento <figure> representa contenido autónomo que puede ser movido del documento principal sin afectar su significado. Puede contener imágenes, diagramas, código, poemas u otros elementos, acompañados opcionalmente de una leyenda con <figcaption>.
image
Contenido autónomo: Puede ser extraído sin perder contexto
text_format
<figcaption>: Proporciona una leyenda o descripción
style
Estilo visual: Generalmente se muestra centrado con márgenes
accessibility
Accesibilidad: Mejora la comprensión del contenido relacionado
El elemento <figure> es semánticamente diferente de simplemente envolver contenido en un <div>, ya que indica que el contenido es autónomo y está relacionado con el documento principal.
<figure>
<img
src=
"imagen.jpg"
alt=
"Descripción de la imagen"
>
<figcaption>
Leyenda que describe la imagen
</figcaption>
</figure>
<figure>
<pre>
<code>
function ejemplo() {
console.log("Hola");
}
</code>
</pre>
<figcaption>
Ejemplo de código JavaScript
</figcaption>
</figure>
Ejemplo visual
Figura 1: Ejemplo de una imagen con su leyenda usando el elemento figure
image
Imágenes con leyendas
code
Fragmentos de código
format_quote
Citas extensas
menu_book
Poemas o versos