La balise HTML <figure>

La balise <figure> marque un contenu autonome — une unité référencée depuis le flux principal du document mais complète en elle-même. Elle contient généralement une image, mais peut tout aussi bien encapsuler un diagramme, une illustration, un listing de code, une citation ou un tableau.

La balise <figure> fait partie des éléments HTML5.

Ce que signifie « contenu autonome »

Un contenu est « autonome » lorsqu'il pourrait être déplacé ailleurs — dans une barre latérale, une annexe ou la page suivante — sans modifier le sens du texte environnant. Le corps du document peut dire « voir la figure ci-dessous », mais la figure elle-même n'a pas besoin d'être à cet endroit précis pour avoir du sens.

C'est la raison principale de choisir <figure> plutôt qu'une simple balise <img> :

Sémantique, pas seulement mise en page. <figure> indique au navigateur et aux technologies d'assistance « ceci est une illustration autonome référencée », tandis qu'une simple <img> n'est qu'une image en ligne dans le texte.
Le contenu est regroupé avec sa légende. Un <figure> lie une image (ou du code, ou une citation) à sa description afin qu'ils forment ensemble un seul bloc logique.
Traitement par les lecteurs d'écran. De nombreux lecteurs d'écran annoncent un <figure> comme une région de figure distincte et lisent son <figcaption> comme le label de la figure, permettant aux utilisateurs d'entendre l'explication directement liée au contenu visuel.

Si une image est purement décorative ou s'intègre en ligne dans une phrase, une simple <img> convient — choisissez <figure> lorsque le contenu est une unité référencée et légendée.

Ajouter une légende avec `<figcaption>`

Pour labelliser ou expliquer la figure, imbriquez un élément <figcaption> à l'intérieur de <figure>. Il doit être le premier ou le dernier enfant du <figure> — en premier pour afficher la légende au-dessus du contenu, en dernier pour l'afficher en dessous.

Un <figure> ne peut contenir qu'un seul <figcaption>.

Syntaxe

La balise <figure> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<figure>) et fermante (</figure>).

Exemple : `<figure>` avec `<figcaption>`

Il s'agit de l'utilisation la plus courante — une image associée à une légende :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>The Eiffel Tower at sunset (see Figure 1).</p>

    <figure>
      <img
        src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"
        alt="The Eiffel Tower silhouetted against an orange sky"
        width="250"
        height="200"
      />
      <figcaption>Figure 1. The Eiffel Tower at sunset.</figcaption>
    </figure>
  </body>
</html>

Essayez vous-même »

Result

Exemple : un listing de code

Un <figure> constitue un cadre naturel pour un exemple de code référencé. La légende peut nommer le listing :

<figure>
  <figcaption>Listing 1. A minimal HTML page.</figcaption>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;
  &lt;body&gt;Hello, world!&lt;/body&gt;
&lt;/html&gt;</code></pre>
</figure>

Consultez <pre> et <code> pour la mise en forme du code.

Exemple : une citation

Une citation extraite qui est référencée dans le texte peut être une figure, avec la source dans la légende :

<figure>
  <blockquote>
    <p>The only way to do great work is to love what you do.</p>
  </blockquote>
  <figcaption>— Steve Jobs</figcaption>
</figure>

Consultez <blockquote> pour le balisage des citations.

Exemple : un tableau

Des données tabulaires référencées comme figure peuvent également être encapsulées :

<figure>
  <figcaption>Table 1. Browser market share.</figcaption>
  <table>
    <tr><th>Browser</th><th>Share</th></tr>
    <tr><td>Chrome</td><td>65%</td></tr>
    <tr><td>Safari</td><td>19%</td></tr>
  </table>
</figure>

Consultez <table> pour la construction de tableaux.

La différence entre `<figure>` et `<aside>`

Les deux éléments regroupent du contenu connexe, mais ils répondent à des questions différentes.

<figure> contient du contenu qui fait partie du flux principal — le document y fait référence (« comme le montre la Figure 1 »). Le supprimer laisserait une référence sans cible. Utilisez-le pour les images, diagrammes, listings de code et citations que le texte mentionne.
<aside> contient du contenu tangentiel — barres latérales, liens connexes, citations encadrées ou espaces publicitaires. Le texte principal reste parfaitement lisible même si l'aside est supprimé, car rien dans le corps n'y fait référence.

Comparaison concrète : un diagramme légendé « Figure 2 : cycle de vie des requêtes » dont parle l'article est un <figure>. Une liste encadrée « Articles connexes » à côté du même paragraphe est un <aside>.

Accessibilité

<figure> possède un rôle ARIA implicite figure ; il n'est pas nécessaire d'ajouter role="figure" manuellement.
Lorsqu'il est présent, un <figcaption> visible agit comme le nom accessible (label) de la figure, ce qui permet aux utilisateurs de lecteurs d'écran d'entendre l'explication liée au contenu. Préférez un vrai <figcaption> à aria-label afin que les utilisateurs voyants et non-voyants voient le même texte.
Pour les images, le texte alt de <img> et le <figcaption> servent des objectifs différents : alt décrit l'image pour les utilisateurs qui ne peuvent pas la voir, tandis que la légende apporte du contexte à tous. Évitez de répéter exactement les mêmes mots dans les deux.

Attributs

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

Pratique

Quelle est la fonction de la balise <figure> en HTML ?

Elle est utilisée pour insérer un tableau.Elle est utilisée pour insérer du contenu intégré.Elle ne peut contenir qu'une photo.Elle marque un contenu autonome tel que des photos, illustrations, diagrammes, listings de code et citations.Elle est utilisée pour ajuster la mise en page d'une page web.