Afficher Une Liste Ordonnées Ou Numérotées En XHTML

Les Listes ordonnées, numérotées et de définitions

NB : Les aperçus donnés dans ce tutoriel ne sont pas parfaits. Il est recommandé de recopier le code sur votre site pour avoir de meilleurs aperçus. La mise à jour de nos styles aura lieu très prochainement. Cela n'enlève rien à l'exactitude du code et à la qualité du tutoriel.

Comme le titre de cette section l'indique, nous allons maintenant apprendre à faire des listes en XHTML. Concrètement, ces derniers nous permettront de classer des données ou présenter des instructions sous forme de liste dans nos documents. Nous verrons alors 3 façons de faire des listes en XHTML :

Les listes non ordonnées
Les listes numérotées
Les listes de définition

Les listes non ordonnées

Faire des listes non ordonnées sous entend qu'il n'y a pas un ordre prédéfini dans la liste. Il s'agit juste d'énumérer des données sous forme de listes à puces. Afin de définir une liste non ordonnée, on utilise la balise <ul></ul> .

Le nom de cette balise :ul provient de l'anglais Unordored List et elle nous servira à délimiter la bloc de liste. Mais après, il nous faut encore distinguer chaque élément de la liste à l'aide de la balise <li>< /li>. C'est-à-dire qu'il faut définir où est le début et la fin de chacun des items contenus dans la liste. D'où le nom de la balise li qui veut dire List Item.

Code XHTML :

<ul>
<li>Jus d'orange</li>
<li>Coca</li>
<li>Café</li>
</ul>

Aperçu :

Jus d'orange
Coca
Café

Listes numérotées

On peut faire des listes numérotées de la même manière que les listes non ordonnées. Sauf qu'ici, on cherche à classer les données de la liste suivant un ordre bien défini à l'aide des numéros. Cette fois-ci, on utilise la balise <ol> : Ordored List à la place de la balise <ul>. Pour délimiter les items, on utilise toujours la balise< li>.

Code XHTML :

<ol>
<li>Spaghettis à la carbonara</li>
<li>Spaghettis Bolonaise</li>
<li>Spaghettis au fromage</li>
</ol>

Liste de définition

Les listes de définitions servent à indiquer un terme à définir et la définition de ce terme. Elles ont été conçues pour les entrées de glossaire. Pour autant, leur utilisation n'est pas limitée à ces dernières. Le principe est tout simplement de faire correspondre les termes aux définitions. La structure d'une liste de définitions est donnée par trois balises:

La balise conteneur <dl> qui délimite la bloc de liste
La balise <dt> ou Definition Term contiendra un terme de définition
La balise <dd> ou Definition Data qui servira à la description de définition

Code XHTML :

<dl>
<dt>Ingrédients :</dt>
<dd>

<ul>
<li>8 jaunes d'oeuf </li>
<li>200g de sucre blanc</li>
<li>1l de lait</li>
<li>Parfum et colorant</li>
</ul>
</dd>

Aperçu :

Ingrédients :

8 jaunes d'oeuf
200g de sucre blanc
1l de lait
Parfum et colorant

On peut mettre plusieurs dd pour un seul dt, et inversement. En effet, toutes les combinaisons sont réalisables.

Imbriquer les listes

En XHTML, on peut insérer d'autres listes à l'intérieur des listes. C'est ce qu'on appelle des listes imbriquées. On doit donc avoir quelque chose qui ressemble à ceci :

Aperçu :

fruits
légumes :
- céleris
- carottes

Code XHTML :

<ul>
<li>fruits</li>
<li>légumes :

<ul>
<li>céleris</li>
<li>carottes</li>
</ul>
</li>
</ul>

On peut aussi faire une imbrication avec des listes de définition. Une liste à puces et une liste numérotée à l'intérieur d'une liste de définition par exemple.

Ingrédients :

8 jaunes d'oeuf
200g de sucre blanc
1l de lait
Parfum et colorant

Préparation

Faire le lait avec le colorant et le parfum
Travailler les jaunes d'oeuf avec le sucre jusqu'à ce qu'ils blanchissent
Verser le lait chaud dans 2.
Lorsque la cuisson nappe la spatule, la crème anglaise est cuite

Le code est un peu plus complexe, mais vous devriez être capable d'en saisir la logique :

Code XHTML :

<dl>
<dt>Ingrédients :</dt>
<dd>

<ul>
<li>8 jaunes d'oeuf </li>
<li>200g de sucre blanc</li>
<li>1l de lait</li>
<li>Parfum et colorant</li>
</ul>

</dd>
<dt>Préparation</dt>
<dd>

<ol>
<li>Faire le lait avec le colorant et le parfum </li>
<li>Travailler les jaunes d'oeuf avec le sucre jusqu'à ce qu'ils blanchissent</li>
<li>Verser le lait chaud dans 2.</li>

<li>Lorsque la cuisson nappe la spatule, la crème anglaise est cuite</li>
</ol>

</dd>
</dl>

Et maintenant, vous savez non seulement comment faire de la crème anglaise mais aussi et surtout vous savez ce qu'est une liste de définition en XHTML.

Bonnes manières XHTML

Comme toujours, il y a des normes à respecter pour bien coder en XHTML.

Par respect du principe, de la norme , le <dt> ne peut pas contenir d'éléments de type bloc, et plus particulièrement les <hN> (exemple : h1).
Si le contenu d'un <dt> ne peut pas être marqué comme un titre, dans ce cas, il ne peut pas avoir la même importance dans la hiérarchie du document.
Bien que les listes de définitions puissent être formatées pour ressembler aux données tabulaires, elles ne peuvent pas contenir des caractéristiques d'accessibilité comme les étiquettes (label) et les titres (h1, etc.) pour lier les informations entre elles. C'est pourquoi elles ne devraient pas être utilisées pour remplacer des données tabulaires complexes.

Il arrive parfois de confondre les noms des balises. Pour vous aider à vous en souvenir, il vaut mieux essayer de retenir les noms anglais des éléments: ol vaut pour Ordored List , ul pour Unordored liste et li pour List Item.

Les balises <ul> </ul> annoncent respectivement le début et la fin d'une liste à puces, tandis que les balises <ol> </ol> annoncent le début et la fin d'une liste numérotée.

Une question ? Venez la poser sur notre forum développement web !