Un article technique renvoie souvent à un graphique, une capture d'écran ou un extrait de code par une phrase du type « comme le montre le schéma ci-dessous ». Ce contenu n'est pas vraiment une partie du texte : c'est une pièce à part, que le texte se contente de désigner. Il pourrait tout aussi bien se retrouver plus bas dans la page, dans une colonne latérale, ou même en annexe, sans que le sens du paragraphe qui le mentionne en soit changé.
<figure> existe précisément pour marquer ce genre de contenu autonome : une image, une illustration, un extrait de code ou un graphique, référencé depuis le texte principal mais capable de vivre sa vie propre.
Définition
<figure> regroupe un contenu autonome, référencé depuis le texte qui l'entoure, avec sa légende associée si elle existe. Le test à retenir est simple : si ce contenu pouvait être déplacé ailleurs dans le document, ou même dans une annexe, sans casser la logique du paragraphe qui le mentionne, alors c'est un bon candidat pour <figure>. À l'inverse, une image qui fait partie intégrante d'une phrase, comme une icône au milieu d'un texte, n'a rien à faire dedans.
Ce qu'elle peut contenir
Une image reste le cas le plus fréquent, mais <figure> accepte n'importe quel contenu autonome : un extrait de code présenté dans un bloc <pre>, un graphique généré en SVG, une citation longue, un tableau de données, ou même plusieurs images formant une petite galerie sous une légende commune. Sa <figcaption> associée, facultative mais recommandée, peut se placer en premier ou en dernier enfant.
Un exemple concret
Un article qui documente une fonction peut illustrer son usage par un extrait de code légendé, plutôt que de le laisser flotter au milieu du texte :
<p>La fonction ci-dessous filtre les lignes vides avant traitement.</p>
<figure>
<pre><code>for ligne in fichier: if ligne.strip(): traiter(ligne)</code></pre>
<figcaption>Filtrage des lignes vides avant traitement</figcaption>
</figure>Ce bloc de code pourrait être déplacé dans un encart latéral ou en fin d'article sans que la phrase qui l'introduit perde son sens : c'est exactement le signe qu'il mérite sa propre <figure>.
Différence avec une image seule
Une balise <img> posée seule dans le texte ne dit rien de son statut : est-ce une illustration décorative, un contenu essentiel, un élément qu'on pourrait référencer ailleurs dans le document ? Rien ne le précise. En l'enveloppant dans <figure> et en lui donnant une <figcaption>, on donne à l'image une existence propre : un point de référence identifiable (« voir la figure 2 »), une description associée automatiquement, et une structure que certaines technologies d'assistance permettent de parcourir indépendamment du reste du texte.
Quand s'en passer
Toutes les images ne méritent pas une <figure>. Un logo dans l'en-tête, une icône décorative à côté d'un bouton, ou une photo purement illustrative sans légende ni référence explicite dans le texte n'ont rien à gagner à être enveloppés dans ce conteneur : une simple <img> suffit, et ajouter <figure> autour n'apporte alors qu'une balise supplémentaire sans signification réelle.
| Situation | Balise adaptée |
|---|---|
| Image décorative, sans légende ni référence | img seule |
| Icône au milieu d'une phrase | img seule |
| Graphique référencé par le texte, avec légende | figure et figcaption |
| Extrait de code documenté et cité comme exemple | figure et figcaption |
<figure>. Une photo purement décorative, sans légende ni référence depuis le texte, reste plus simple en <img> seule. Réserver <figure> aux contenus vraiment autonomes évite d'alourdir la page pour rien.figure ?Non, seulement celles qui constituent un contenu autonome, référencé depuis le texte, ou qui ont besoin d'une légende. Une image purement décorative ou totalement intégrée à une phrase n'a pas besoin de ce conteneur supplémentaire.
Oui, c'est un usage courant pour une petite galerie de photos liées entre elles, qui partagent alors une seule légende décrivant l'ensemble plutôt qu'une légende par image.
Non, elle peut contenir du code, un tableau, une citation, une vidéo ou un fichier audio : n'importe quel contenu autonome et référencé par le texte convient, l'image n'est que le cas le plus fréquent.