Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/dl below:

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

Baseline Widely available

L'élément HTML <dl> représente une liste de descriptions sous la forme d'une liste de paires associant des termes (fournis par des éléments <dt>) et leurs descriptions ou définitions (fournies par des éléments <dd>). On utilisera par exemple cet élément pour implémenter un glossaire.

<p>Cryptids of Cornwall:</p>

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

p,
dt {
  font-weight: bold;
}

dl,
dd {
  font-size: 0.9rem;
}

dd {
  margin-bottom: 1em;
}

Cet élément inclut les attributs universels.

<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 descriptions -->
</dl>

<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>

<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>

Il est également possible de définir plusieurs termes avec plusieurs descriptions correspondantes, en combinant les exemples ci-dessus.

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>Nom</dt>
  <dd>Godzilla</dd>
  <dt>Né le</dt>
  <dd>1952</dd>
  <dt>Lieu de naissance</dt>
  <dd>Japon</dd>
  <dt>Couleur</dt>
  <dd>Vert</dd>
</dl>

Conseil : il peut être pratique de définir un séparateur clé-valeur dans le CSS, par exemple :

dt::after {
  content: ": ";
}

WHATWG HTML permet d'envelopper chaque groupe nom-valeur d'un élément <dl> dans un élément <div>. 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.

<dl>
  <div>
    <dt>Nom</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Né le</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Lieu de naissance</dt>
    <dd>Japon</dd>
  </div>
  <div>
    <dt>Couleur</dt>
    <dd>Vert</dd>
  </div>
</dl>

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.

Les lecteurs d'écran annoncent <dl> de façon différente. À partir d'iOS 14, VoiceOver annoncera que le contenu de <dl> 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)

• L'élément <dt>
• L'élément <dd>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4