Balise HTML <figcaption>

La balise <figcaption> est l'un des éléments HTML5. Elle définit une légende ou une description pour le contenu d'un élément <figure>. Elle doit être le premier ou le dernier enfant de <figure>. En tant que premier enfant, elle affiche la légende au-dessus du contenu de la figure ; en tant que dernier enfant, elle l'affiche en dessous.

Un <figure> ne peut contenir qu'un seul <figcaption>, mais la figure elle-même peut encapsuler de nombreux types de contenu autonome : un <img>, un listing <code>, un <table>, un <blockquote>, un graphique, et bien plus encore.

Pourquoi utiliser `<figcaption>` plutôt qu'un `<p>` ?

Vous pourriez placer un <p> à côté d'une image et visuellement le résultat serait identique. La différence est sémantique et importe surtout pour l'accessibilité.

Lorsqu'une légende est balisée avec <figcaption> à l'intérieur d'un <figure>, le navigateur associe programmatiquement la légende à la figure. Les technologies d'assistance telles que les lecteurs d'écran annoncent les deux ensemble — l'utilisateur entend que le contenu est une figure et entend sa légende comme libellé associé. Un simple <p> n'est qu'un texte sans relation qui se trouve à proximité ; rien n'indique à la machine qu'il appartient à l'image.

Optez donc pour <figure> + <figcaption> chaque fois que la légende fait partie intégrante du contenu (et que vous vous attendriez à ce qu'ils se déplacent ensemble en cas de redistribution de la page). Utilisez un simple <p> pour le texte de paragraphe ordinaire.

Syntaxe

La balise <figcaption> fonctionne par paires. Le contenu est écrit entre les balises ouvrante <figcaption> et fermante (</figcaption>), et l'élément se trouve à l'intérieur d'un <figure> :

<figure>
  <!-- figure content, e.g. an image, code block, or table -->
  <figcaption>Caption text</figcaption>
</figure>

Exemple de la balise HTML `<figcaption>` :

Balise HTML <figcaption>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Image of a baby</p>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Essayez vous-même »

Résultat

Légende en premier ou légende en dernier

Déplacez le <figcaption> pour contrôler l'emplacement de la légende. Rien d'autre ne change — seule sa position parmi les enfants de la figure est modifiée.

Légende sous l'image (dernier enfant) :

<figure>
  <img src="diagram.png" alt="Request flow diagram" width="400" height="250" />
  <figcaption>Fig.1 – How a request travels through the app.</figcaption>
</figure>

Légende au-dessus de l'image (premier enfant) :

<figure>
  <figcaption>Fig.1 – How a request travels through the app.</figcaption>
  <img src="diagram.png" alt="Request flow diagram" width="400" height="250" />
</figure>

Utiliser `<figcaption>` au-delà des images

Un <figure> est destiné à toute unité autonome susceptible d'être légendée — il n'est pas limité aux images.

Légender un listing de code

Encapsulez un bloc <pre> / <code> pour lier le listing et son libellé :

<figure>
  <figcaption>Listing 1 – A minimal "Hello, world" in JavaScript.</figcaption>
  <pre><code>console.log("Hello, world!");</code></pre>
</figure>

Légender un tableau

<figure>
  <figcaption>Table 1 – HTTP status codes used by the API.</figcaption>
  <table>
    <tr><th>Code</th><th>Meaning</th></tr>
    <tr><td>200</td><td>OK</td></tr>
    <tr><td>404</td><td>Not Found</td></tr>
  </table>
</figure>

Remarque : un <table> possède son propre élément de légende intégré, <caption>, qui est le choix le plus conventionnel pour un seul tableau de données. Utilisez <figure>/<figcaption> lorsque le tableau est l'une des nombreuses figures légendées d'un document, ou lorsque vous souhaitez un libellé de style « Tableau 1 » qui s'inscrit comme une figure.

Légender une citation

<figure>
  <blockquote>
    <p>The best way to predict the future is to invent it.</p>
  </blockquote>
  <figcaption>— Alan Kay</figcaption>
</figure>

Consultez la balise <blockquote> pour en savoir plus sur la citation de sources externes.

Accessibilité : `alt` n'est pas un `<figcaption>`

Il est facile de confondre l'attribut alt d'une image avec un <figcaption>, mais ils ont des objectifs différents et ne doivent pas se dupliquer :

alt est l'alternative textuelle de l'image. Elle remplace l'image lorsqu'elle ne peut pas être vue (lien brisé, connexion lente ou utilisateur non visuel). Elle décrit ce que montre l'image. Un lecteur d'écran la lit à la place de l'image.
<figcaption> est une légende — une information complémentaire sur la figure qu'un lecteur voyant voit également. Elle ajoute souvent un contexte que l'image seule ne transmet pas (« Fig.1 – Les ventes ont augmenté de 20 % d'une année sur l'autre »).

Les deux peuvent s'appliquer simultanément à la même figure :

<figure>
  <img src="chart.png" alt="Bar chart of quarterly sales rising each quarter" />
  <figcaption>Fig.2 – Quarterly sales, 2025.</figcaption>
</figure>

Ici, alt décrit le visuel (« un graphique à barres en hausse chaque trimestre ») afin que les utilisateurs non visuels obtiennent les données, tandis que le <figcaption> ajoute le libellé que tout le monde lit. Gardez alt non vide et descriptif même lorsqu'une légende est présente.

Attributs

La balise <figcaption> prend en charge les attributs globaux et les attributs d'événement.

Comment styliser une balise HTML <figcaption>

Par défaut, les navigateurs affichent l'élément <figcaption> comme un élément de niveau bloc. Vous pouvez personnaliser son apparence avec CSS :

figcaption {
  font-style: italic;
  color: gray; /* muted text so the caption reads as secondary */
  text-align: center;
  margin-top: 5px;
}

Un exemple complet et exécutable, stylisant la légende et donnant à la figure un cadre subtil :

<!DOCTYPE html>
<html>
  <head>
    <title>Styled figcaption</title>
    <style>
      figure {
        border: 1px solid lightgray;
        padding: 10px;
        display: inline-block;
        text-align: center;
      }
      figcaption {
        font-style: italic;
        color: gray;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A cute baby" width="250" height="200" />
      <figcaption>Fig.1 – Cute baby</figcaption>
    </figure>
  </body>
</html>

Exercice

Pratique

Quelle est la fonction de la balise HTML <figcaption> ?

Associer programmatiquement une légende à un élément <figure>Légender uniquement les images, jamais un autre contenuFournir un titre pour une section ou une pageCréer des puces dans une liste

Pourquoi utiliser <figcaption> plutôt qu'un <p> ?