Curso HTML 6.3 Figuras y pies de foto (figure, figcaption)

6.3 Figuras y pies de foto (figure, figcaption)

En HTML5, el elemento figure permite agrupar un recurso de contenido (imagen, ilustración, diagrama, tabla, fragmento de código, etc.) junto con una leyenda descrita mediante figcaption. Su principal ventaja es semántica: separa la “figura” del flujo principal del texto, indicando que puede moverse o citarse independientemente sin perder el contexto.

1. Semántica y accesibilidad

Elemento flow: figure forma parte del flujo de contenido, pero su contenido es tangencial al contenido principal.
Rol implícito: no requiere atributos ARIA adicionales; los lectores de pantalla entienden figure y figcaption como figuras con leyendas.
Ubicación de figcaption: debe ser el primer o el último hijo directo de figure. Solo se recomienda una única leyenda por figura.
Atributos globales: admite id, class, title, lang, aria-label, etc.

2. Uso básico con una imagen

Ejemplo mínimo: una imagen con su pie de foto.



  
  
  
  Vista panorámica del lago al amanecer.

Si el pie de foto se coloca antes de la imagen, sigue siendo válido:


  
  Mapa de distribución de especies marinas.

3. Agrupación de varios medios

Podemos incluir múltiples imágenes o elementos en una misma figura y describirlos con un único pie de foto.


  
  
  
  
  
  Variantes de flores capturadas durante la expedición botánica.

4. Ejemplos avanzados

4.1 Diagrama con etiquetas enriquecidas


  
  
  
  
    Diagrama de flujo de datos. Entrada representa los datos iniciales, Procesamiento el motor de reglas.

4.2 Figura de vídeo con subtítulo


  
  Extracto de la charla sobre accesibilidad web.

5. Mejores prácticas

Siempre incluir atributo alt en <img> para descripciones concisas.
Utilizar figcaption para aportar contexto adicional; no repetir literal el texto de alt.
Emplear figure para contenido que pueda independizarse (gráficos, tablas, fragmentos de código, etc.).
No abusar de múltiples figcaption dentro de un mismo figure; según especificación solo uno resulta efectivo.
Evitar estilos directos en figure o figcaption si no dispones de CSS; usa clases y hojas de estilo externas.
Ubica la leyenda antes o después del contenido según conveniencia, pero mantén la estructura semántica.

6. Compatibilidad

Navegador	figure/figcaption
Chrome, Firefox, Edge, Safari	Totalmente soportado
Internet Explorer 9+	figure: soportado (figcaption tratado como elemento inline-block) IE8 y anteriores: no semántico

Con esto dispones de toda la información necesaria para implementar figuras y pies de foto de forma semántica, accesible y flexible en tus proyectos HTML.