MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

L'élément HTML <figure> représente un contenu indépendant, habituellement accompagné d'une légende grâce à l'élément <figcaption>. Il est normalement référencé de manière unique. C'est souvent une image, une illustration, un diagramme, un fragment de code ou un schéma auquel il est fait référence dans le texte principal mais qui peut être utilisé sur une autre page ou dans une annexe sans que cela affecte le contenu principal.

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 d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte du contenu de flux.
Rôles ARIA autorisés group, presentation
Interface DOM HTMLElement

Attributs

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

Notes d'utilisation

  • Bien que cet élément soit en lien avec le contenu principal, sa position est indépendante du contenu principal du document.
  • <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).

Exemples

Premier exemple

HTML

<!-- Une image toute simple -->
<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Une superbe photo">
</figure>

<!-- Une image avec une légende : figcaption -->
<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Une superbe photo">
    
  <figcaption>Une légende pour cette photo</figcaption>
</figure>

Résultat

Extrait de code

HTML

<figure>
  <figcaption>Obtenir les détails du navigateur</figcaption>
  <pre>
    function NavigatorExample(){
      var 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;
    }            
  </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

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<figure>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<figure>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 8 4.0 (2.0) (Oui) 9.0 11.10 5.1
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple 3.0 4.0 (2.0) (Oui) 9.0 11.0 5.1 (iOS 5.0)

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, marie-ototoi, tregagnon
 Dernière mise à jour par : SphinxKnight,