<figure>

Ajouté dans HTML5

Résumé

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. Bien qu'il soit en lien avec le contenu principal, sa position est indépendante du contenu principal du document. 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.

Notes d'utilisation :

  • Étant une racine de sectionnement, le contenu de l'élément <figure> est 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 enfant).

Attributs

Cet élément supporte seulement les attributs globaux.

Exemple

Premier exemple simple

<!-- Une image toute simple -->
<figure>
  <img src="image.jpg" alt="Une superbe photo">
</figure>

<!-- Une image avec une légende : figcaption -->
<figure>
  <img src="image.jpg" alt="Une superbe photo">
    
  <figcaption>Une légende pour cette photo</figcaption>
</figure>

Voir l'exemple sur une page

Exemple 2

<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>
Obtenir les détails du navigateur
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;
          }
 

Exemple 3

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

« Si le débogage correspond au retrait de bogues,
alors la programmation correspond à l'ajout de bogues. »

Spécifications

Spécification Statut Commentaires
WHATWG 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) Internet Explorer Opera Safari
Support simple 8 4.0 (2.0) 9.0 11.10 5.1
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 3.0 4.0 (2.0) 9.0 11.0 5.1 (iOS 5.0)

Voir aussi

Étiquettes et contributeurs liés au document

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