<dl> : l'élément de liste de descriptions - HTML (HyperText Markup Language)

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez également contribuer en rejoignant la communauté francophone sur MDN Web Docs.

`Plusieurs termes avec une même définition`

html


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

Résultat

`Un seul terme avec plusieurs définitions`

html


  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.

Résultat

`Termes et descriptions multiples`

Il est également possible de définir plusieurs termes avec plusieurs descriptions correspondantes, en combinant les exemples 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.

html Nom Godzilla Né le 1952 Lieu de naissance Japon Couleur Vert Conseil : il peut être pratique de définir un séparateur clé-valeur dans le CSS, par exemple : css dt::after { content: ": "; } Résultat

`Intégration de groupes nom-valeur dans les éléments`

WHATWG HTML permet d'envelopper chaque groupe nom-valeur d'un élément

dans un élément . Cela peut être utile lors de l'utilisation de microdonnées, ou lorsque les attributs universels s'appliquent à un groupe entier, ou encore à des fins de style. html Nom Godzilla Né le 1952 Lieu de naissance Japon Couleur Vert Résultat

`Notes`

Cet élément ne doit pas être utilisé (de même que les éléments

), 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.

`Accessibilité`

Les lecteurs d'écran annoncent

de façon différente. À partir d'iOS 14, VoiceOver annoncera que le contenu de est une liste lors de la navigation au curseur (mais pas via la lecture générale). Il faut donc s'assurer que la relation entre les éléments de la liste est bien communiquée grâce aux contenus des éléments. CodePen - Les camarades HTML : dt & dd (en) VoiceOver sous iOS 14 prend en charge les listes de descriptions (en)

`Spécifications`

Specification
HTML # the-dl-element

`Compatibilité des navigateurs`

Voir aussi L'élément L'élément Help improve MDN Was this page helpful to you? Learn how to contribute.This page was last modified on 1 janv. 1970 by MDN contributors. View this page on GitHub • Report a problem with this content