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.
En savoir plus
Article MDN à propos de la balise figure.