Légende de média

1

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:

Voir le CodePen de Simon Arnold (@smnarnold).

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>

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 de l'image. Pour s'en débarrasser, il suffit de changer son display à block.

Pour en savoir plus, voir cet article MDN à propos de figure et celui-ci à propos de figcaption.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme