Figure

La balise <figure> permet d'associer un élément (image, vidéo, diagramme, etc.) à une légende <figcaption>. Ainsi, les moteurs de recherche comprennent le lien étroit unissant les deux éléments.

Par exemple:

La balise <figcaption> peut être avant ou après l'élément quelle décrit, tant qu'elle est enfant direct de la balise <figure>.

👌

<figure> <img src="image.png"> <figcaption>...</figcaption> </figure>

🚫

<figure> <img src="image.png"> <div> <figcaption>...</figcaption> </div> </figure>

ERREUR FRÉQUENTE

Si un espace indésirable affiche entre une image et sa légende (figcaption), il est probable que cet espace soit créé par le display: inline; par défaut de l’image.

Pour s’en débarrasser, il suffit de changer son display à display: block; dans le CSS.

Article MDN à propos de la balise figure. figure figure figcaption figcaption