<figure> : l'élément de figure avec légende facultative

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'élément HTML <figure> représente un contenu autonome, éventuellement accompagné d'une légende facultative, qui est spécifiée à l'aide de l'élément <figcaption>. La figure, sa légende et son contenu sont référencés comme une seule unité.

Exemple interactif

Catégories de contenu	Contenu de flux, racine de sectionnement, contenu tangible.
Contenu autorisé	Un élément `<figcaption>` suivi d'un contenu de flux ou du contenu de flux suivi d'un élément `<figcaption>` ou du contenu de flux.
Omission de balises	Aucune, la balise ouvrante et la balise fermante sont toutes les deux obligatoires.
Parents autorisés	Tout élément qui accepte du contenu de flux.
Rôle ARIA implicite	`figure`
Rôles ARIA autorisés	Sans descendant `<figcaption>` descendant : n'importe quel rôle, sinon aucun rôle autorisé.
Interface DOM	`HTMLElement`

Attributs

Cet élément prend uniquement en charge les attributs universels.

Notes d'utilisation

Généralement, un élément <figure> est utilisé pour une image, une illustration, un diagramme, un fragment de code ou autre qui est référencé depuis le flux principal du document. Toutefois, cet élément peut être déplacé vers une autre partie du document ou en annexe sans que cela ait un impact sur le flux principal.
<figure> est une racine de sectionnement, son contenu est donc exclu du plan général du document.
Une légende peut être associée avec l'élément <figure> en insérant un élément <figcaption> à l'intérieur (en premier ou dernier élément enfant). C'est le premier élément <figcaption> qui sera trouvé dans la figure qui sera affiché comme légende.

Exemples

Images

html

<!-- Une simple image -->
<figure>
  <img src="favicon-192x192.png" alt="Le logo de MDN." />
</figure>

<!-- Une image avec une légende -->
<figure>
  <img src="favicon-192x192.png" alt="Le logo de MDN." />
  <figcaption>Logo MDN</figcaption>
</figure>

Résultat

Extrait de code

html

<figure>
  <figcaption>Obtenir les détails du navigateur</figcaption>
  <pre>
    function NavigatorExample(){
      let txt;
      txt = "Nom de code: " + navigator.appCodeName;
      txt += "Nom du navigateur : " + navigator.appName;
      txt += "Version : " + navigator.appVersion ;
      txt += "Cookies activés : " + navigator.cookieEnabled;
      txt += "Plate-forme: " + navigator.platform;
      txt += "En-tête d'agent utilisateur : " + navigator.userAgent;
      console.log("NavigatorExample", txt);
    }
  </pre>
</figure>

Résultat

Citation

html

<figure>
  <figcaption>
    <cite>Edsger Dijkstra : </cite>
  </figcaption>
  <p>
    « Si le débogage correspond au retrait de bogues, alors la programmation
    correspond à l'ajout de bogues. »
  </p>
</figure>

Résultat

Poème

html

<figure>
  <p style="white-space:pre">
    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
    green, Or, like a nymph, with long dishevell'd hair, Dance on the sands, and
    yet no footing seen: Love is a spirit all compact of fire, Not gross to
    sink, but light, and will aspire.
  </p>
  <figcaption>
    <cite>Venus and Adonis</cite>. By: William Shakespeare
  </figcaption>
</figure>

Résultat

Spécifications

Specification
HTML Standard # the-figure-element

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

L'élément <figcaption>