English

<figure>

Lier une image ou un schéma à sa description, même si tu déplaces le tout

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • structure

<figure> et <figcaption> — Le contenu illustratif

La balise <figure> encadre un contenu illustratif (image, diagramme, extrait de code, video) et <figcaption> lui donne une légende visible. Ensemble, ils lient explicitement une illustration à sa description.

Quand l'utiliser

Tu veux associer une légende visible à une image, un graphique, un bloc de code, ou une citation. Le <figure> peut être déplacé dans la page sans perdre son sens, il est auto-suffisant.

Ce que tu gagnes

Accessibilité : la <figcaption> est annoncée par les lecteurs d'écran comme la légende de la figure. Elle complète le alt de l'image en fournissant du contexte visible pour tous.

SEO : Google utilise le texte environnant (dont la <figcaption>) pour comprendre le contenu d'une image (documentation Google).

Exemple de code

<figure>
  <img
    src="/images/landmark-tree.svg"
    alt="Diagram showing the landmark tree of a typical web page"
    width="600"
    height="400"
  >
  <figcaption>
    The landmark tree: banner, navigation, main, and contentinfo.
  </figcaption>
</figure>

Pour aller plus loin