Curso de HTML / Relacionar imágenes y pies con figure y figcaption

figure agrupa contenido que puede tratarse como una unidad, como una imagen, un gráfico o un ejemplo de código. figcaption proporciona un pie visible para esa unidad y se coloca como primer o último hijo de figure. No toda imagen necesita una figura ni un pie independiente.

Preparar una imagen y su explicación

Descarga la versión de 960 píxeles del lago disponible en los archivos de imágenes adaptables. Guárdala junto al HTML con el nombre html-image-sample-lake-tree-960-v1.webp. Sus dimensiones reales son 960 × 540 píxeles.

Coloca el siguiente fragmento dentro de body de un documento completo:

<figure>
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="A tree on a small island in a lake with mountains beyond"
       width="960" height="540">
  <figcaption>Figure: the lake-and-tree example used for this lesson</figcaption>
</figure>

La imagen y su pie quedan relacionados como una figura. Al principio del ejemplo, alt describe la escena y el pie identifica su papel como muestra de la lección. Para el ajuste visual añade este CSS a style en head:

figure { margin: 1rem 0; }
figure img { max-width: 100%; height: auto; }

Abre el archivo y comprueba que el pie aparece debajo. Mueve figcaption al principio de figure, antes de la imagen, guarda y recarga: debe aparecer encima. Restaura después el orden. No lo coloques en medio de varios hijos ni fuera de la figura que describe.

Distinguir la alternativa textual del pie visible

alt proporciona información o función cuando la imagen no se puede percibir. figcaption añade una explicación visible para todos, como contexto, título o procedencia. No se sustituyen automáticamente: cambiar uno no actualiza el otro.

Repetir exactamente la misma frase en ambos puede producir una lectura redundante. En este ejemplo, la alternativa describe árbol, lago y montañas, mientras que el pie explica por qué se utiliza la imagen. Si un gráfico contiene información compleja, presenta la tendencia o conclusión importante y ofrece sus datos mediante texto o una tabla cercana.

Un valor alt="" puede corresponder a una imagen puramente decorativa, pero primero confirma que no se pierde información necesaria. El árbol de decisión de W3C WAI ayuda a valorar el contexto. Revisa esta decisión también en la práctica de accesibilidad básica.

Cuándo utilizar una figura y cuándo omitirla

Una imagen corriente integrada en la explicación no necesita figure si no forma una unidad referenciable con un pie. En cambio, un diagrama comentado como una figura o un ejemplo de código con descripción propia son candidatos más claros.

figure no significa exclusivamente fotografía. La referencia de figure de MDN explica su modelo de contenido. Elige el elemento por la relación entre la figura y su explicación, sin añadir una envoltura únicamente para cambiar los márgenes.

Añadir una fuente visible y comprobar el resultado

Puedes sustituir el pie del primer fragmento por el siguiente. El enlace identifica la lección que proporciona el archivo de práctica y está escrito en inglés porque forma parte del ejemplo conservado:

<figcaption>Example image source: <a href="https://www.codingfactory.net/en/15491">the file supplied with the images lesson</a>.</figcaption>

El texto y la referencia aparecen bajo la foto; alt sigue describiendo la escena. Para imágenes de otra procedencia, comprueba autoría, permisos y condiciones de uso: poner un enlace de atribución no concede por sí solo el derecho a utilizarlas.

Si la figura tiene un espacio inesperado alrededor, revisa el margin de CSS antes de modificar su estructura. Si falta la imagen, verifica su ruta; si falta el pie, comprueba que está dentro de la figura y que los cierres están completos. La revisión de src, alt y dimensiones ayuda a separar los problemas del archivo de los problemas de presentación.