<figure>

Description

L’élément <figure> identifie un contenu autonome — généralement une illustration, un diagramme, un bloc de code, une vidéo ou une citation — qui est référencé dans le texte mais pourrait être déplacé dans une annexe sans affecter le flux du document. Un <figcaption> optionnel fournit la légende.

Syntaxe

<figure>
  <img src="schema.png" alt="Schéma de l'architecture">
  <figcaption>Fig. 1 — Architecture en couches du projet</figcaption>
</figure>

Exemples

Image avec légende :

<figure>
  <img
    src="css-grid-diagram.png"
    alt="Diagramme montrant une grille CSS avec colonnes et lignes numérotées"
    width="600" height="400"
  >
  <figcaption>Figure 1 — Structure d'une grille CSS avec 3 colonnes et 2 lignes.</figcaption>
</figure>

Bloc de code avec légende :

<figure>
  <pre><code>display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;</code></pre>
  <figcaption>Exemple minimal de CSS Grid à 3 colonnes égales.</figcaption>
</figure>

Citation avec source :

<figure>
  <blockquote>
    <p>Le web est une création sociale, pas technique.</p>
  </blockquote>
  <figcaption>— Tim Berners-Lee</figcaption>
</figure>

Notes

<figcaption> : premier ou dernier enfant : <figcaption> doit être le premier ou le dernier enfant de <figure> (pas au milieu). Le plus courant est de le placer après le contenu.

<figure> vs <aside> : <figure> contient du contenu référencé dans le texte principal ; <aside> contient du contenu complémentaire non référencé directement.