<figure>

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.

• Catégories de contenu Contenu de flux, racine de sectionnement, contenu tangible.
• Contenu autorisé Du contenu de flux, précédé ou suivi d'un élément <figcaption>
• Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
• Éléments parents autorisés Tout élément acceptant du contenu de flux.
• Interface DOM HTMLElement

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>

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>

Spécifications

Compatibilité des navigateurs

Voir aussi

• <figcaption>.