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

Poème

HTML

<figure>
 <p>
  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

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 8Edge Support complet OuiFirefox Support complet 4IE Support complet 9Opera Support complet 11Safari Support complet 5.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 5.1Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Voir aussi

Étiquettes et contributeurs liés au document

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