HTML5, définition de l’élément DL

Du nouveau sur le HTML5 avec la définition de l’élément <dl>.
Cet élément déjà existant dans HTML4 comme une « liste de définition » a été légèrement revu pour HTML5.
Souvent utilisée de manière non-sémantique par les concepteurs Web et peu connue en HTML4, la liste de définition demandaient à ce qu’il y ai une forte relation entre son terme (<dt>) et sa définition (<dd>).
Voyons voir ce qu’il en devient.

Ce qui change et ce qui ne change pas

On passe de la « liste de définition » (Definition List) à la « liste de description » (Description List).
Il s’agit certainement ici de rendre plus populaire un type de liste très peu ou très mal utilisé en modifiant son sens premier.
Voici ce que dit la spécification à ce sujet :

L’élément <dl> représente une liste associative constituée de zéro à plusieurs groupes nom-valeur (une liste de description). Chaque groupe doit être constitué d’un ou plusieurs noms (élément <dt>) suivis par une ou plusieurs descriptions (élément <dd>). Dans un unique <dl> il peut ne pas y avoir qu’un unique nom associé à une ou plusieurs descriptions.

On y retrouve nos éléments couplés <dt> et <dd>, deux composants de notre liste de définition description. (il y a des habitudes à perdre !)

Un élément fait son apparition pour venir compléter le nom (élément <dt>), il s’agit de : <dfn>

Exemples d’utilisation

Glossaire

Il se rapproche de notre ancienne liste de définition en proposant une définition précise d’un mot. C’est ici que notre nouvel élément va prendre son sens.

<aside>
  <h2>Glossaire</h2>
  <dl>
      <dt><dfn>RSS</dfn></dt>
        <dd>Un format XML servant à réunir les informations souvent mises à jour d'un site Internet.</dd>
      <dt><dfn>Weblog</dfn></dt>
        <dd>Contraction des termes "web" et "log", un weblog est un site souvent mis à jour, à l'image d'un journal</dd>
  </dl>
</aside>

<dfn> sert donc précisément à cerner le mot défini ensuite grâce à l’éménent <dd>

Meta-données

En fin d’article par exemple, ou en page Mentions Légales d’un site Internet, il peut être intéressant de fournir des informations listées méthodiquement.

<dl>
  <dt>Rédacteurs :</dt>
    <dd>David</dd>
    <dd>Fanny</dd>
  <dt>Webmasters :</dt>
    <dd>Sylvain</dd>
  <dt>Hébergeur :</dt>
    <dd>H.I.F.</dd>
</dl>

Nous profitons donc ici d’un seul nom servant de titre à une liste de description qui la suit immédiatement. Nous savons rapidement ici que Fanny et David (les deux <dd>) sont des rédacteurs (leur <dt> commun).

Plusieurs noms pour une seule description

Le dernier cas représente une situation que vous rencontrerez probablement assez rarement, mais puisque la spécification le prévoit, autant l’aborder. Il s’agit d’une combinaison nomS-description.

<dl>
  <dt><dfn>Apple</dfn></dt>
  <dt><dfn>Microsoft</dfn></dt>
  <dd>Prestataires de quelques services informatiques
sans trop de valeur ajoutée.</dd>
</dl>

Ici Apple et Microsoft sont réunis (ça change hein !) sous la même définition. Nous avons donc deux termes pour une définition commune.
L’inverse est aussi possible, puisqu’un terme pourrait facilement avoir deux définitions ou plus. Je parle bien ici de définition, puisque nous avons vu précédemment que pour une liste de description c’est déjà possible.

Au final…

La liste de description ne change donc pas beaucoup de sa grande soeur proposée pour HTML4. Celle-ci a cependant été revue dans ses valeurs sémantiques et devrait permettre une utilisation plus populaire.

N’hésitez pas à renforcer la valeur sémantique d’une liste de description en la plaçant convenablement dans l’élément <details> , ou en fonction de sa valeur, dans un élément <aside>.

Source :
http://html5doctor.com/the-dl-element/