Comment j'utilise les listes de définitions HTML

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Comment j'utilise les listes de définitions HTML

Les listes de définition dl permettent de créer une relation entre un terme et sa définition. L’utilisation la plus évidente de cet élément est le «glossaire» avec, par exemple, le terme à définir dans la balise dt et sa définition dans la balise dd. Les spécifications sont relativement claires à ce sujet et proposent même d’élargir son utilisation au dialogue entre les protagonistes d’une pièce de théâtre, aux instructions à suivre, à une FAQ avec question(s)/réponse(s), etc. On le devine, mais ça ira mieux en le disant : il est possible d’associer un ou plusieurs dt à un ou plusieurs dd dans un dl.

Les exemples présents sur la page du W3C sont très clairs à ce sujet :

In the following example, one definition is linked to two terms.
<dl>
    <dt lang="en-US"> <dfn>color</dfn> </dt>
    <dt lang="en-GB"> <dfn>colour</dfn> </dt>
    <dd>
        A sensation which (in humans) derives from
        the ability of the fine structure of
        the eye to distinguish three differently
        filtered analyses of a view.
    </dd>
</dl>

Il y a quelques années j’avais testé cette possibilité :

<dl>
    <dt class="day">dimanche 01/10/06</dt>
    <dt class="hour">15:19</dt>
    <dd>
        Tiens, ma loupanthère n'a toujours pas été indexée par Google.
    </dd>
    <dt class="hour">15:32</dt>
    <dd>
        La requête "loupanthère" sur fr.yahoo.com donne
        www.alfa147-france.net comme premier résultat...
    </dd>
    <dt class="hour">15:48</dt>
    <dd>
        J'ai ajouté deux balises H1 et H2 comportant des liens vers ma page
    </dd>
</dl>
Après avoir posé la question sur Twitter et comme parfois 140 caractères ne suffisent pas, je la repose ici :

Plusieurs <dt> et/ou plusieurs <dd> à la suite ça vous choque ? http://j.mp/cqFc6G <- par exemple dans cette page.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



19 commentaires pour “Comment j'utilise les listes de définitions HTML”

  1. truffo dit :

    Tient tient, un vieux sujet qui revient sur le tapis. Le premier exemple vient de la spécification HTML 5, HTML 4 a laissé un grand flou sur ces balises.

    J’ai vraiment du mal avec la deuxième écriture, on n’a pas la relation référent / référé. Pour moi, plusieurs dt fonctionne bien avec des synonymes ou des traductions mais difficilement avec 2 définitions distinctes

  2. Luc dit :

    Suite de twitter ;)

    bienvue pour la possibilité de lier plusieurs dt à 1 dd.

    structurellement ton exemple semble juste. par contre, la définition de DD n’est pas a proprement parler une définition de la date ou de l’heure.

    Je ne sais pas si c’est juste sémantiquement parlant.

    c’est comme si on utilisais une balise blockquote et qu’on y mettais paragraphe normale sans que ce soit une quelconque citation.

    ou une balise adress avec dedant une citation ^^

    mais je pinaille là

  3. Nico dit :

    Pour être très franc… j’en sais rien, je n’utilise que très rarement cette balise.

  4. […] This post was mentioned on Twitter by bb (css4design), br1o les bons tuyaux and br1o les bons tuyaux, Sylvain FIX. Sylvain FIX said: RT @br1o: Comment j’utilise les listes de définitions HTML http://j.mp/9sstqD […]

  5. Xavier dit :

    Ta comparaison entre ces deux exemples est intéressante et parle d’elle même (à mon sens). L’exemple du W3C définit le même mot (hors la différence de langue), alors que ton exemple lui découpe la définition (à prioris).

    Donc deux qui se suivent pourquoi pas à condition que les mots à définir soient « autonome ». Je ne vois pas l’intérêt de :

    La tortue de mer mammifère en voie d'extinction

    En ce qui concerne les dd, il n’y a pas de limitation dans le nombre ;)

    Le sujet est en tout cas intéressant car cet élément est souvent mal utilisé et j’avoue avoir du mal à le mettre à sa place. D’ailleurs, ton exemple devrait il vraiment utiliser un dl

    Merci pour ce sujet Bruno.

  6. Luc dit :

    c’est drole quand même, mais les dl/dt/dd

    c’était un truc dont on avais déjà parlé il y a 2 ans ^^

    http://lucmuller.free.fr/blog/index.php?article=486-microformat-html-web-semantique-et-balisage

    souvenir souvenir :)

  7. briegel dit :

    D’un strict point de vue de bon sens, il me semblerait plus juste d’utiliser ces balises pour tout usage qui se rapproche d’un glossaire. Alors, bien entendu, on peut mettre suffisamment de choses bizarres dans un glossaire pour qu’il n’y ressemble même plus. Je pose juste une question : peux-tu définir précisément « 15:19″, ou même « 01/10/06″ ? Attention, pas d’approximations !

    Alors, sémantique ou pas ? Pour moi, certainement pas.

    Ceci dit, la question serait plutôt : est-ce que ça peut choquer Google ?

  8. briegel dit :

    Retour aux sources : HTML1 (1992) : « A glosary (or definition list) is a list of paragraphs each of which has a short title alongside it. Apart from glossaries, this format is useful for presenting a set of named elements to the reader. » http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html

  9. Bruno Bichet dit :

    truffo, Luc, Xavier — l’exemple que j’ai donné n’est effectivement pas un bon candidat pour une liste de définition telle que je l’ai utilisée. Aujourd’hui, à la lumière de l’exemple de Xavier, j’utiliserais sans doute quelques chose comme :

    <article> <h1>Les tortues</h1> <dl> <dt>Marines</dt> <dd>Espèce en voie de disparition</dd> <dt>Terrestres</dt> <dd>Avancent lentement</dd> </dl> </article>

    briegel — Aujourd’hui, je me rends compte que les relations entre la date, l’heure et les événements associés sont un peu bancales et que mon utilisation de la liste de définition était largement perfectible.

    En reprenant l’exemple ci-dessus, on pourrait arriver à quelque chose comme :

    <article> <h1>dimanche 01/10/06</h1> <dl> <dt>15:19</dt> <dd> Tiens, ma loupanthère n'a toujours pas été indexée par Google. </dd> <dt>15:32</dt> <dd> La requête "loupanthère" sur fr.yahoo.com donne www.alfa147-france.net comme premier résultat... </dd> </dl> <h1>Lundi 02/10/06</h1> <dl> <dt>01:15</dt> <dd>bla bla bla</dd> <dt>09:00</dt> dd>bla bla bla</dd> </dl> </article>

    • nourcy dit :

      2 h1 dans un même article ?!

      J’aurais plutôt fait:

      News bla bla

      <time datetime="2010-10-01T05:00-07:00">dimanche 01/10/06</time> <dl> <dt>15:19</dt> <dd> Tiens, ma loupanthère n'a toujours pas été indexée par Google.

      &lt;/dd&gt;
      &lt;dt&gt;15:32&lt;/dt&gt;
      &lt;dd&gt;
          La requête "loupanthère" sur fr.yahoo.com donne
          http://www.alfa147-france.net comme premier résultat...
      &lt;/dd&gt;
      

      </dl>

      News bla bla bla

      <time datetime="2010-10-01T05:00-07:00">dimanche 01/10/06</time> <dl> <dt>01:15</dt> <dd>bla bla bla</dd> <dt>09:00</dt> dd>bla bla bla</dd> </dl>

      voir même encadrer ton h1 et ton time dans un voir un hgroup

      titre

      dimanche 01/10/06

      bien que pour le hgroup j’ai un doute ..

  10. briegel dit :

    J’ai l’impression que si ces balises pourraient être à priori, sémantiquement correctes s’agissant dans cet exemple d’un monologue, elles ne le sont plus quand elles relient cette auto-conversation à des éléments purement temporels.

    Sémantiquement parlant, tu passes alors d’un dialogue entre deux personnes à un dialogue entre toi et le temps… Bizarre, non ? D’autant plus que l’utilisation en dialogue est déjà une extension limite de l’usage historique de ces balises, prévues pour les glossaires.

    Autre question : est-ce que ces balises apportent vraiment un plus dans ton cas ?

  11. […] This post was mentioned on Twitter by br1o les bons tuyaux, Clément Roy. Clément Roy said: RT @br1o: Nouveau commentaire sur "Comment j’utilise les listes de définitions HTML" http://j.mp/bWjtH7 […]

  12. Luc dit :

    Mouahaha… on se lance dans le débat du Oui ou Non plusieurs H1 dans une section ? :p

    ça mériterai un billet ça ^^

  13. Bruno Bichet dit :

    Luc — lol, pourquoi pas ! ;)

  14. Luc dit :

    J’ai même pas noté la vrai bétise…

    @nourcy

    dimanche 01/10/06

    <

    dl> 15:19

    Quid de

    dimanche 01/10/06 à 15h19

    Tiens, ma loupanthère n’a toujours pas été indexée par Google.

    si vraiment on veut faire des choses justes :p (enfin je dis ça… je dis rien…)

  15. Luc dit :

    arf mon code est pas passé…

    j’ai mis toute la date dans une balise time… c’est plus juste. avec un « p » contenant le texte en dessous

    • Bruno Bichet dit :

      tu peux m’envoyer le code pour corriger le commentaire ?

  16. Luc dit :

    En fait, j’ai repris l’idée de nourcy avec la date dans la balise time. et le dl/dt avec l’heure.

    seulement, ça n’a pas de sens.

    donc j’ai mis, la date et l’heure dans une balise time. et en dessous le contenu « loupanthère… »

  17. […] Autant je trouve qu’il est intéressant de chipoter sur les détails de l’utilisation des listes de définition, autant la question de savoir si l’on doit mettre une grille dans son design me semble […]



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site