HTML - Mise en page du texte : Liste

On a souvent besoin d'énumérer des listes d'éléments. Et bien, il existe en HTML différents éléments qui permettent de représenter des listes. Il y a tout d'abord les listes à puces représentées par l'élément UL, les listes ordonnées représentées par l'élément OL et enfin les listes de définitions représentées par l'élément DL. Il y a ensuite encore deux autres types de listes pour représenter des menus et hiérarchies de répertoires. L'exemple suivant montre une liste à puces et une liste ordonnée.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<HTML>

<HEAD>

<TITLE>Listes</TITLE>

<BODY>

<UL>

<LI> 1

<LI type="circle"> 2

<LI type="square"> 3

</UL>

<OL>

<LI type="I"> 1

<LI type="A"> 2

<LI type="i"> 3

<LI type="a"> 4

</OL>

Listing 2.23 Liste à puces et liste ordonnée.

Figure 2.20 Liste à puces et liste ordonnée.

Liste à puces

Une liste à puces est une liste non-ordonnée d'éléments. Une telle liste est représentée par l'élément UL (Unordered List) dont les balises ouvrantes et fermantes, toutes deux obligatoires, délimitent la liste. Chaque élément de la liste est ensuite représenté par l'élément LI (List Item) dont la balise fermante est optionnelle.

On peut changer l'aspect de la puce en changeant la valeur de l'attribut type. Si on veut changer toutes les puces de la liste, on utilisera celui de l'élément UL. Et si on veut personnaliser chaque élément de la liste, on utilisera celui de l'élément LI. Par défaut, les puces sont des cercles pleins (disc) et on peut obtenir un cercle vide avec circle et un carré plein avec square.

Type	Aspect
`disc`	cercle plein (valeur par défaut)
`circle`	cercle vide
`square`	carré plein

Tableau 2.5 Valeurs de l'attribut type pour les listes à puces.

Liste ordonnée

Une liste ordonnée a comme particularité que chacun de ses éléments possède un numéro pour l'identifier. Une telle liste est représentée par l'élément OL (Ordered List) et ses éléments sont également représentés avec l'élément LI.

On peut changer le style de la numérotation des éléments de la liste en changeant la valeur de l'attribut type de l'élément OL pour que le changement s'applique sur tous les éléments de la liste ou sur celui de l'élément LI pour ne changer le style que d'un élément de la liste. Les différentes valeurs possibles sont reprises dans le tableau suivant.

Type	Aspect
`1`	numérotation arabe (valeur par défaut)
`I`	numérotation romaine majuscule
`i`	numérotation romaine minuscule
`A`	numérotation alphabétique majuscule
`a`	numérotation alphabétique minuscule

Tableau 2.6 Valeurs de l'attribut type pour les listes ordonnées.

Numérotation

On peut jouer sur la numérotation des listes ordonnées de différentes manières. On peut tout d'abord utiliser l'attribut start de l'élément OL. La valeur qu'on donne à l'attribut défini le nombre à partir duquel commence la numérotation pour cette liste. Néanmoins, très peu de navigateurs supportent cet attribut et il est donc déconseillée de l'utiliser.

On peut également changer la valeur de l'attribut value de l'élément LI. On force ainsi cet élément à avoir un certain numéro. Les éléments suivant prendront des numéros qui continueront à partir de ce numéro. Attention néanmoins, avec cette technique, on peut se retrouver avec des listes dont les numéros ne se suivent pas et ne sont pas croissants comme en témoigne l'exemple suivant.

1
2
3
4
5
6
7
8
9
10

<HTML>

<HEAD>

<TITLE>Liste </TITLE>

<BODY>

<OL>

<LI value="7">Premier

<LI>Second

<LI>

</OL>

Listing 2.24 Numérotation des listes ordonnées.

Figure 2.21 Numérotation des listes ordonnées.

Liste de définitions

Une liste de définition permet de lister des termes avec des définitions. La liste est représentée par l'élément DL (Definition List) dont les deux balises sont obligatoires. Chaque terme est ensuite introduit avec l'élément DT (Definition Term) et les définitions avec l'élément DD (Definition Data). Les balises fermantes sont optionnelles pour ces deux derniers éléments. L'exemple suivant vous montre une liste comprenant deux mots, chacun ayant une définition.

1
2
3
4
5
6
7
8
9
10
11

<HTML>

<HEAD>

<TITLE>Liste de </TITLE>

<BODY>

<DL>

<DT>Mot 1

<DD> 1

<DT>Mot 2

<DD> 2

</DL>

Listing 2.25 Liste de définitions.

Figure 2.22 Liste de définitions.

Dans une liste de définitions, vous pouvez avoir plusieurs définitions pour un même terme et également plusieurs termes avec une même définition.

Listes imbriquées

Il est tout à fait possible d'imbriquer les listes, c'est-à-dire de mettre une liste comme élément d'une autre liste. On peut garder le même type de liste ou même les mélanger. Voici un exemple qui présente une recette de cuisine. La liste principale est une liste de définitions dont le premier éléments sont les ingrédients représentés par une liste à puces et le second élément est la marche à suivre représentée par une liste ordonnée.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<HTML>

<HEAD>

<TITLE>Recette de cuisine</TITLE>

<BODY>

<DL>

<DD>

<UL>

<LI>3 oeufs

<LI>250g de beurre

<LI>250g de sucre

<LI>250g de farine

<LI>1 de sel

</UL>

<DD>

<OL>

<LI>Blanchir le sucre avec le beurre ramolli l'aide d'une spatule en bois jusqu' obtenir un

<LI>Ajouter les jaunes d' et bien

<LI>Ajouter la farine et

<LI>Monter les blancs d' en neige bien ferme avec une de sel

<LI>...

</OL>

</DL>

Listing 2.26 Listes imbriquées : une recette de cuisine.

Figure 2.23 Listes imbriquées : une recette de cuisine.

Autres listes

Sachez aussi qu'il existe les listes de menus représentées par l'élément MENU et les listes de répertoires représentées par l'élément DIR. Ces deux listes se comportent de la même manière que les listes à puces et il est d'ailleurs déconseillé de les utiliser puisqu'elles sont dépréciées en HTML 4.01 et n'existent pas en XHTML 1.1.

Chapitre 3