El elemento <figure> combinado con <img> y <figcaption> permite crear imágenes con leyendas descriptivas que son semánticamente correctas y accesibles.
image
Contenido autónomo: La figura puede ser extraída sin perder contexto
text_format
<figcaption>: Proporciona una leyenda o descripción
accessibility
Accesibilidad: Mejora la comprensión del contenido visual
style
Estilo visual: Generalmente se muestra centrado con márgenes
check_circle
Con <figure>
• Contenido semántico
• Leyenda asociada
• Accesibilidad mejorada
• SEO optimizado
• Leyenda asociada
• Accesibilidad mejorada
• SEO optimizado
error
Sin <figure>
• Sin significado semántico
• Leyenda desasociada
• Accesibilidad reducida
• SEO menos efectivo
• Leyenda desasociada
• Accesibilidad reducida
• SEO menos efectivo
<figure>
<img
src=
"paisaje.jpg"
alt=
"Montañas al amanecer"
width=
"600"
height=
"400"
>
<figcaption>
Figura 1: Paisaje montañoso capturado al amanecer en los Pirineos.
</figcaption>
</figure>
<figure>
<img
src=
"antes.jpg"
alt=
"Imagen antes"
>
<img
src=
="despues.jpg"
alt=
"Imagen después"
>
<figcaption>
Comparación: antes y después de la restauración.
</figcaption>
</figure>
Ejemplo visual
Figura 1: Paisaje montañoso capturado al amanecer en los Pirineos.
El elemento <figcaption> debe ser el primer o último hijo del elemento <figure>. No se puede usar más de un <figcaption> dentro de un mismo <figure>.