• 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 Advanced Wysiwyg Editor autorise de justifier le texte, de couper, copier, coller, d’annuler ou de restaurer la dernière modification, de placer un caractère en indice ou en exposant, de choisir la couleur du texte et de l’arrière-plan, d’insérer un caractère spécial, d’accéder à la source de l’article en Xhtml.

Pour des raisons étranges, l’installation d’Avanced Wysiwyg Editor a provoqué la disparition des boutons Couper un article en deux avec la balise more (que nous retrouvons avec le mode Code), Correcteur orthoghraphique et Aide. Nous avons lu qu’une deuxième barre d’outils devait apparaître, mais nous n’avons pu l’activer, ni sous Msie, ni sous Firefox !

Toutefois, accéder à la source Xhtml de nos articles nous permet d’être encore plus précis pour ouvrir et fermer les balises qu’avec l’éditeur en mode code : parfois, espaces ou balises incongrues se placent dans la source du texte, et le Xhtml n’est pas alors bien formé.

De plus, nous apprécions de pouvoir insérer des caractères spéciaux, notamment afin d’accentuer les capitales, conformément aux usages de la typgraphie moderne. Lorsque l’on composait au plomb, la parcimonie était excusable ! Aujourd’hui, l’outil informatique facilite certains ornements qui améliorent la compréhension. Ainsi, comparons les expressions suivantes :

LE PALAIS DES CONGRES et LE PALAIS DES CONGRÈS

Pourtant, nous déconseillons l’emploi des indices et des exposants, qui provoquent des décalages dans les hauteurs de ligne fort désagréables sur le plan visuel. Pour s’en convaincre, il suffit de consulter le site d’un quotidien français vespéral !

Au fait, et contrairement à une faute répandue, numéro ne s’écrit pas en abrégé avec un n et °. ° est réservé à des mesures physiques ! La forme raccourcie correcte du mot est la lettre n suivie de la lettre o placée en exposant. Pour respecter les normes typgraphiques, on se contentera, en Html, de saisir no.

<addendum>

21/03/2008.

Advanced Wysiwyg Editor permet d’inscrire en dur les balises Xhtml des articles et des pages dans la base de données, y compris les marques des paragraphes, ce n’est pas le cas du mode code de TinyMce. Hélas, là encore, la texturisation du code pour l’affichage laisse à désirer, car la moulinette de WordPress aime à rajouter systématiquement la balise de fermeture d’un paragraphe.

</addendum>