HTML figure et figcaption : regrouper un contenu et sa légende

HTML <figure> regroupe le contenu autonome tel que des illustrations, des graphiques ou du code en une seule unité, et <figcaption> fournit sa légende. Placez un seul figcaption en tant que premier ou dernier enfant de figure ; omettez-le lorsqu'aucune légende n'est nécessaire.

figure est-il réservé aux images ?

Vous pouvez utiliser figure pour les photographies, illustrations, graphiques, exemples de code ou citations auxquels le texte se réfère comme un seul élément. Utilisez div lorsque vous n'avez besoin que d'un conteneur de style, et évitez d'envelopper une section entière et liée dans figure. L'utilisation de cet élément ne vérifie pas automatiquement le copyright ou la source du matériel.

Un figcaption décrit le reste du contenu de son parent direct figure. Placez-le à l’intérieur de figure, avec au maximum un figcaption par figure. Si vous avez besoin d’explications pour le haut et le bas, rassemblez-les dans un seul figcaption.

Exemple complet : mettez la légende en premier ou en dernier

Enregistrez le code suivant sous le nom figures.html et ouvrez-le dans un navigateur. L'exemple dessine des formes simples avec SVG (Scalable Vector Graphics) afin qu'il fonctionne sans fichiers image séparés. Le premier élément a sa légende avant le graphique ; le second l'a après le graphique.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparer les positions des légendes de figure</title>
  <style>
    figure { margin: 1rem 0; max-width: 20rem; }
    svg { display: block; width: 100%; height: auto; }
    figcaption { padding: 0.5rem 0; }
  </style>
</head>
<body>
  <h1>Comparer deux formes</h1>
  <figure>
    <figcaption>Figure A. Cercle bleu</figcaption>
    <svg viewBox="0 0 240 120" role="img" aria-label="Cercle bleu au centre d’un fond clair">
      <rect width="240" height="120" fill="#f0f3f5" />
      <circle cx="120" cy="60" r="36" fill="#176e96" />
    </svg>
  </figure>
  <figure>
    <svg viewBox="0 0 240 120" role="img" aria-label="Carré orange au centre d’un fond clair">
      <rect width="240" height="120" fill="#f0f3f5" />
      <rect x="84" y="24" width="72" height="72" fill="#b35a12" />
    </svg>
    <figcaption>Figure B. Carré orange</figcaption>
  </figure>
</body>
</html>

« Figure A. Cercle bleu » apparaît au-dessus du cercle et « Figure B. Carré orange » au-dessous du carré. Lorsque vous réduisez la fenêtre, le SVG s’adapte à la largeur de figure. Comparez les positions en déplaçant figcaption au début ou à la fin de figure, sans le sortir de cet élément.

Les légendes et le texte alternatif des images ont des rôles différents

Un figcaption peut contenir un titre, une explication ou une source visible par tous les lecteurs. L’attribut alt d’une image fournit un contenu de remplacement aux lecteurs qui ne peuvent pas voir l’image. Ne laissez pas automatiquement cet attribut vide pour une image importante simplement parce qu’une légende existe, et ne répétez pas chaque explication mot pour mot aux deux endroits.

L’exemple utilise SVG plutôt que img, il fournit donc des descriptions des formes avec role et aria-label. Pour une photographie insérée avec img, spécifiez src et alt ainsi que les dimensions nécessaires. Si un graphique communique des comparaisons numériques, réfléchissez si une courte légende suffit et fournissez également ses données clés dans le texte ou dans un tableau.

L’élément figure ne génère pas automatiquement de légendes ni de numéros de figure, et ses marges par défaut dépendent du navigateur et du CSS. Si une numérotation est nécessaire, veillez à sa cohérence avec les références du document. Les références MDN de figure et MDN de figcaption expliquent les règles détaillées des éléments.