HTML figure y figcaption: cuándo usarlos y cómo escribir leyendas efectivas
Cuando insertas una imagen, un gráfico o un fragmento de código, no basta con “ponerlo y ya”. En HTML, las etiquetas <figure> y <figcaption> permiten encapsular el recurso y darle una leyenda significativa. El resultado: mejor accesibilidad, semántica más clara y SEO más sólido. Aquí aprenderás cuándo usarlas, cómo escribir alt útiles y qué errores evitar.
<figure> con <figcaption> para dar contexto.
<figure> agrupa un recurso auto-contenido (imagen, gráfico, bloque de código, tabla) que tiene sentido por sí mismo. <figcaption> añade una leyenda que explica el por qué y el para qué de ese recurso.
🤔 Pregunta clave: ¿El recurso se entiende fuera del flujo del texto y merece una explicación breve? Si sí, envuélvelo en <figure> y añade <figcaption>.
⚠️ Error común: usar <figure> para imágenes decorativas. Si la imagen no aporta información, usa alt="" y evita <figcaption>.
Estructura mínima de figure + figcaption
Ejemplo base
<figure>
<img src="/ruta/diagrama.png" alt="Flujo de autenticación entre cliente, servidor y base de datos.">
<figcaption>Diagrama 1: Flujo básico de autenticación.</figcaption>
</figure>- Imágenes o gráficos que requieren contexto o fuente.
- Fragmentos de código con una descripción (“qué muestra y por qué importa”).
- Tablas con una conclusión o dato clave.
- Iconos o imágenes puramente decorativas.
- Repetir literalmente el texto que ya está en el párrafo contiguo.
- Meter contenido no relacionado dentro del mismo
<figure>.
Texto alternativo (alt): la regla del contexto
💡 Regla práctica: Describe en alt lo necesario para entender el aporte de la imagen. Si es decorativa, usa alt="" para que los lectores de pantalla la ignoren.
Buenos y malos ejemplos de alt
<!-- ✅ Bueno: aporta el dato relevante -->
<img src="/graficos/ventas-q3.png" alt="Ventas del Q3 por región: Norte 45%, Centro 35%, Sur 20%">
<!-- ❌ Malo: describe apariencia, no contenido -->
<img src="/graficos/ventas-q3.png" alt="Gráfico bonito con barras azules">
<!-- ✅ Decorativa: ignórala en lector de pantalla -->
<img src="/iconos/onda.svg" alt="">Estás viendo solo el 60% del contenido. ¡Únete a la Membresía Premium! para acceder al contenido completo.
Comentarios y Valoraciones
No hay comentarios aún. ¡Sé el primero en opinar!