MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Vos résultats de recherche

    <dl>

    Résumé

    L'élément HTML <dl> (pour Definition List ou liste de définitions) forme une liste de paires associant des termes et leurs définitions. Typiquement, on utilisera cet élément pour implémenter un glossaire.

    • Catégories de contenu  Contenu de flux, et si les éléments enfants de <dl> incluent une paire avec un nom et une valeur, du contenu palpable
    • Contenu autorisé Zéro ou plusieurs éléments <dt>, chacun suivi par un ou plusieurs éléments <dd>.
    • 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 HTMLDListElement

    Attributs

    Cet élément inclut les attributs globaux.

    compact
    Cet attribut force la description de la définition à apparaître sur la même ligne que le terme défini. Cet attribut n'est pas standard et n'est actuellement pas supporté.

    Exemples

    Exemple avec un seul terme et une seule définition

    <dl>
      <dt>Firefox</dt>
      <dd>Un navigateur Web libre, open-source, multi-plateforme
      dévelopé par la Mozilla Corporation et des centaines de 
      volontaires.</dd>
    
      <!-- D'autres termes et leurs définitions -->
    </dl>
    

    Cet example produira :

    Firefox
    Un navigateur Web libre, open-source, multi-plateforme dévelopé par la Mozilla Corporation et des centaines de volontaires.

    Plusieurs termes avec une même définition

    <dl>
      <dt>Firefox</dt>
      <dt>Mozilla Firefox</dt>
      <dt>Fx</dt>
      <dd>Un navigateur Web libre, open-source, multi-plateforme 
      dévelopé par la Mozilla Corporation et des centaines de 
      volontaires.</dd>
    
      <!-- D'autres termes et leurs définitions -->
    </dl>
    

    Produira le résultat suivant :

    Firefox
    Mozilla Firefox
    Fx
    Un navigateur Web libre, open-source, multi-plateforme dévelopé par la Mozilla Corporation et des centaines de volontaires.

    Un seul terme, plusieurs définitions

    <dl>
      <dt>Firefox</dt>
      <dd>Un navigateur Web libre, open-source, multi-plateforme
          dévelopé par la Mozilla Corporation et des centaines de
          volontaires.</dd>
      <dd>Le petit panda, panda roux, panda fuligineux ou panda 
          éclatant (Ailurus fulgens), est un mammifère originaire 
          de l'Himalaya et de la Chine méridionale.</dd>
    
      <!-- D'autres termes et leurs définitions -->
    </dl>
    

    Produira le résultat suivant :

    Firefox
    Un navigateur Web libre, open-source, multi-plateforme dévelopé par la Mozilla Corporation et des centaines de volontaires.
    Le petit panda, panda roux, panda fuligineux ou panda éclatant (Ailurus fulgens), est un mammifère originaire de l'Himalaya et de la Chine méridionale.

    Plusieurs termes avec plusieurs définitions

    Il est également possible de définir plusieurs termes grâce à plusieurs définitions en combinant les différents exemples montrés ci-dessus.

    Métadonnées

    Les listes de définitions sont utiles lorsqu'on souhaite afficher des métadonnées sous forme d'une liste de clés-valeurs.

    <dl>
        <dt>Name</dt>    
        <dd>Godzilla</dd>
        <dt>Born</dt>
        <dd>1952</dd>
        <dt>Birthplace</dt>
        <dd>Japan</dd>
        <dt>Color</dt>
        <dd>Green</dd>
    </dl>

    Astuce : Il peut être pratique de définir un séparateur clé/valeur en CSS3, par exemple : dt:after {content: ": ";}.

    Notes

    Cet élément ne doit pas être utilisé (de même que les éléments <ul>), dans le seul but de créer une indentation sur la page. Bien que cela fonctionne parfaitement c'est une pratique déconseillée qui mêle mise en forme et sémantique. Cela modifie le rôle que doivent avoir les listes de définitions.

    Pour changer l'indentation de la définition d'un terme, il faut utiliser la propriété CSS margin.

    Spécifications

    Spécification Statut Commentaires
    WHATWG HTML Living Standard
    La définition de '<dl>' dans cette spécification.
    Standard évolutif  
    HTML5
    La définition de '<dl>' dans cette spécification.
    Recommendation  
    HTML 4.01 Specification
    La définition de '<dl>' dans cette spécification.
    Recommendation  

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support simple 1.0 (Oui) (Oui) (Oui) (Oui)
    Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Support simple (Oui) (Oui) (Oui) (Oui) (Oui)

    Voir aussi

    Étiquettes et contributeurs liés au document

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