English

<dl>

Structurer des paires clé-valeur : glossaire, récap de commande, FAQ, métadonnées

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • listes

<dl> + <dt> + <dd> — La liste de définitions

La balise <dl> représente une liste de descriptions : des paires terme (<dt>) et description (<dd>). Ce n'est pas limité aux glossaires, tout contenu clé-valeur y a sa place.

Quand l'utiliser

Tu veux afficher un glossaire de termes techniques, un récapitulatif de commande (produit/prix), une FAQ (question/réponse), des métadonnées (auteur, date, catégorie) ou tout couple clé-valeur.

Ce que tu gagnes

Accessibilité : les lecteurs d'écran annoncent la relation terme-description. L'utilisateur navigue de terme en terme et entend la description associée.

Exemple de code

<dl>
  <dt>Semantic HTML</dt>
  <dd>HTML that conveys meaning, not just presentation.</dd>
 
  <dt>Landmark</dt>
  <dd>A region of the page identified by its role (banner, main, navigation).</dd>
 
  <dt>Screen reader</dt>
  <dd>Assistive technology that reads page content aloud.</dd>
</dl>
<dl>
  <dt>Product</dt>
  <dd>Ergonomic keyboard</dd>
 
  <dt>Quantity</dt>
  <dd>1</dd>
 
  <dt>Total</dt>
  <dd>89.00 EUR</dd>
</dl>

Pour aller plus loin