mozilla
Vos résultats de recherche

    <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

    Contributors to this page: tregagnon, SphinxKnight
    Dernière mise à jour par : SphinxKnight,