• les listes non-ordonnées,
• les listes ordonnées,
• les listes de définitions.

Les balises utilisées dans les listes ont les significations suivantes dans la langue de Shakespeare :

ul

Unordered Lists

ol

Ordered Lists

li

List items

dl

Definition Lists

dt

Definition Term

dl

Definition Description

Les listes ordonnées permettent une énumération simple. Les listes ordonnées appliquent un chiffre devant chaque item. Contrairement à leur nom, les listes de définition peuvent être aussi utilisées pour relier des éléments entre eux.

Les listes débutent toujours par la balise <ul> et finissent par la balise </ul> pour une liste non-ordonnée ou <ol> et </ol> pour une liste ordonnée. À l’intérieur, on utilise les balises <li> et </li>. Les listes de définition se comportent différemment.

Les listes ordonnées

Exemple…

<ul>
  <li>papier,</li>
  <li>ciseaux,</li>
  <li>cailloux.</li>
</ul>

Affichera…

• papier,
• ciseaux,
• cailloux.

La feuille de style gère le retrait du paragraphe et l’aspect de la puce.

Les listes non-ordonnées

Exemple…

<ol>
  <li>papier,</li>
  <li>ciseaux,</li>
  <li>cailloux.</li>
</ol>

Affichera…

1. papier,
2. ciseaux,
3. cailloux.

La feuille de style gère le retrait de paragraphe et l’aspect de la numérotation. Pour des raisons esthétiques, on peut supprimer la numérotation et afficher normalement le texte. Pour autant, cette liste numérotée conservera sa valeur sémantique !

Imbrication de listes

Il est possible d’imbriquer des listes à l’infini pour des raisons logiques.

Nota. On peut, avec Css, styler différemment chaque enfant d’une liste.

Exemple…

<ul>
  <li>Aquitaine
    <ul>
      <li>Dordogne,</li>
      <li>Gironde,</li>
      <li>Landes,</li>
      <li>Lot-et-Garonne,</li>
      <li>Pyrénées-Atlantiques.</li>
  </ul>
  </li>
  <li>Languedoc-Roussillon
    <ul>
      <li>Aude,</li>
      <li>Gard,</li>
      <li>Hérault,</li>
      <li>Lozère,</li>
      <li>Pyrénées-Orientales.</li>
    </ul>
  </li>
</ul>

Affichera…

• Aquitaine
  • Dordogne,
  • Gironde,
  • Landes,
  • Lot-et-Garonne,
  • Pyrénées-Atlantiques.
• Languedoc-Roussillon
  • Aude,
  • Gard,
  • Hérault,
  • Lozère,
  • Pyrénées-Orientales.

Pour simplifier la gestion des balises, la méthode consiste à indenter le code, car le risque d’erreur est grand de se tromper. La plupart des logiciels d’édition de code propose une coloration ou une mise en évidence des balises ouvrantes et fermantes. Cette fonction est fort utile.

De même, peut-on placer entre <li> et </li> des paragraphes, des images…

Exemple…

<ul>
  <li>Papiers
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
    </p>
  </li>
  <li>Ciseaux</li>
  <li>Cailloux</li>
</ul>

Affichera…

• Papiers

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

• Ciseaux
• Cailloux

Listes de définition

Les listes de définition débutent toujours le conteneur <dl> et finissent par </dl>. À l’intérieur, on utilise les balises <dt> et </dt> qui indique le terme à définir, puis <dd> et </dd> pour donner la définition.

Dans une même listes de définitions, il peut y avoir plusieurs balises <dt> et </dt> et plusieurs balises <dd> et </dd> qui peuvent être mélangées, mais évidemment une seule balise <dl> et </dl>.

Par exemple, pour définir les mois de janvier et de février, on écrira…

<dl>
  <dt>Janvier</dt>
  <dd>Premier mois de l'année.</dd>
  <dt>Février</dt>
  <dd>Deuxième mois de l'année.</dd>
</dl>

Qui affichera…

Janvier

Premier mois de l’année.

Février

Deuxième mois de l’année.

L’affichage des listes de définition est différent entre Firefox et Msie. Le premier navigateur reconnaît notamment la propriété dd:before dans une feuille de style.

Les listes de définition peuvent avoir un usage varié. Imaginons que nous soyons écrivain ; nous voulons informer les lecteurs de nos séances de dédicace. Nous pourrions écrire au kilomètre…

Jeudi 21 août 2008, de 17 h 00 à 18 h 30, présentation puis dédicace d’« En quête » de lecteurs à la Bibliothèque Municipale et, à partir de 18 h 30, à la Librairie Alphabétique de Bordeaux (Gironde).

En réorganisant et en factorisant l’information (c’est l’un des défis les plus intéressants d’Xhtml selon nous !), nous pourrions recourir à la présentation suivante…

<dl>
  <dt>Jeudi 21 août 2008</dt>
  <dd>Bordeaux (Gironde)</dd>
  <dt>de 17 h 00 à 18 h 30</dt>
  <dd>Bibliothèque Municipale</dd>
  <dt>de 18 h 30 à 19 h 00</dt>
  <dd>Librairie Alphabétique</dd>
  <dd>Présentation puis dédicace d<strong><em>« En Quête » de lecteurs</em></strong>.</dd>
</dl>

Qui affichera…

Jeudi 21 août 2008

Bordeaux (Gironde)

de 17 h 00 à 18 h 30

Bibliothèque Municipale

de 18 h 30 à 19 h 00

Librairie Alphabétique

Présentation puis dédicace d’« En Quête » de lecteurs.

De la même façon, nous pourrions nous servir d’une liste de définition pour présenter les commentaires (forcément élogieux !) de lecteurs sur notre ouvrage. Nous indiquerions comme termes l’identité du lecteur puis la date de l’avis, la description correspondant au libellé du commentaire.

Au-delà d’une présentation plus aérée, les moteurs de recherche référenceront mieux l’information présentée ainsi.

Ainsi avons-nous appris, grâce à l’article la sidebar à la loupe, comprendre les widgets et déclarer une « WAR » que…

[la] balise li est une des rares balises Html de deuxième niveau avec dd (mise à part le body évidemment) qui accepte tout type de balises en son sein. Il est même possible d’y placer du texte directement sans perdre en conformité. Ce comportement associé au fait qu’on peut justifier l’utilisation d’une liste à partir de deux ou trois élements faisant partie d’une même unité logico-sémantique, explique le succès des listes ul ou ol auprès des intégrateurs Html.

Voilà qui nous permet de savoir comment coder les textes dans nos Widgets WordPress !

<addendum>

21/03/2008.

Malheureusement, WordPress a tendance à texturiser le code lors de la rédaction des articles. Ainsi est-il impossible de placer une liste simple dans une liste de définition : le code Xhtml n’est plus valide.

</addendum>