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.

📖 EN SAVOIR PLUS

Article MDN à propos de la balise figure.

figure

figcaption