2.7.1. Listes énumératives


Le code:

.......
<ul>
<li>Première ligne </li>
<li>Deuxième ligne</li>
<li>Troisième ligne</li>
</ul>
........

produit la liste simple suivante:

2.7.2. Listes imbriquées


Le code:

.......
<ul>
<li>Première ligne
<ul>
<li>Première ligne 1</li>
<li>Première ligne 2</li>
<li>Première ligne 3</li>
</ul>
</li>
<li>Deuxième ligne
<ul>
<li>Deuxième ligne 1</li>
<li>Deuxième ligne 2</li>
<li>Deuxième ligne 3</li>
</ul>
</li>
<li>Troisième ligne</li>
<li>Quatrième ligne</li>
</ul>
........

produit la liste imbriquée suivante:


2.7.3. Listes numérotées


Le code:

.......
<ol>
<li>Première ligne </li>
<li>Deuxième ligne</li>
<li>Troisième ligne</li>
</ol>
........

produit la liste numérotée suivante:

  1. Première ligne
  2. Deuxième ligne
  3. Troisième ligne

2.7.4. Attributs


Pour des listes énumératives:

Nom Syntaxe Validité Effet
Puce ronde type="circle" <ul> Lignes précédées d'une puce ronde
Puce carrée type="square" <ul> Lignes précédées d'une puce carrée
Puce ronde type="disc" <ul> Lignes précédées d'une puce circulaire pleine

Pour les listes numérotées:

Nom Syntaxe Validité Effet
Lettres majuscules type="A" <ol> Lignes numérotées par lettres majuscules
Lettres minuscules type="a" <ol> Lignes numérotées par lettres minuscules
Chiffres romains type="I" <ol> Lignes numérotées par chiffres romains

Par exemple, le code

.......
<ol type="I">
<li>Première ligne </li>
<li>Deuxième ligne</li>
<li>Troisième ligne</li>
</ol>
........

produit l'effet suivant:

  1. Première ligne
  2. Deuxième ligne
  3. Troisième ligne

2.7.5. Style

Le seul attribut style permet de réaliser les effets du chapitre précédent au moyen du langage CSS:

Élément Attribut Description de l'attribut Domaine de validité
<ul>
(liste simple) 		style list-style-type: genre;(v. en bas) La liste entière
<ol>
(liste numérotée) 		style list-style-type: numéro;(v. en bas) La liste entière

genre:numéro:
none: aucune puce
circle: puce circulaire
square: puce carrée
disc: puce discoïdale
 decimal: 1. ,2. , 3. , ...
lower-roman: i. ,ii. ,iii. , ...
upper-roman: I. ,II. , III., ...
decimal-leading-zero: 01. ,02. , 03. , ...
lower-greek: α, β,...
lower-latin: a. ,b., c. , ...
upper-latin: A., B. ,C. , ...

Par exemple, le code

.......
<ol style="list-style-type:upper-roman">
<li>Première ligne </li>
<li>Deuxième ligne</li>
<li>Troisième ligne</li>
</ol>
........

produit le même effet qu'en haut:

  1. Première ligne
  2. Deuxième ligne
  3. Troisième ligne