Le langage HTML/Listes

Les listes permettent d'ordonner une énumération. Même si on les rencontre rarement, elles ont cet avantage qu'elles ont été créées spécialement pour faciliter une opération qu'effectue souvent tout créateur de page web et qui consiste à dresser une liste d'éléments.

Images

Tableaux

Types de liste

Il existe trois types de listes :

une liste sans ordre précis (non ordonnée),
une liste tenant compte de l'ordre (ordonnée),
une liste de termes et descriptions (définitions).

Listes non numérotées

Les listes non numérotées sont introduites par la balise ul (pour unordered list, « liste non ordonnée ») et chaque élément de la liste par li (list item, « élément de liste ») :

<ul>
    <li>premier élément de la liste&nbsp;;</li>
    <li>deuxième élément&nbsp;;</li>
    <li>etc.</li>
</ul>

Les balises fermantes pour les éléments li ne sont pas obligatoires. Ce code donnera quelque chose comme :

premier élément de la liste ;
deuxième élément ;
etc.

Listes numérotées

Les listes numérotées fonctionnent sur le même principe que les listes non numérotées. La seule différence est qu'on utilise la balise ol (ordered list, « liste ordonée ») au lieu de la balise ul. Les éléments restent encadrés par les balises li.

Exemple :

<ol>
    <li>premier élément de la liste&nbsp;;</li>
    <li>deuxième élément&nbsp;;</li>
    <li>etc.</li>
</ol>

Ce code donnera :

premier élément de la liste ;
deuxième élément ;
etc.

En HTML transitionnel, l'attribut start permet de définir la valeur initiale de la numérotation.

Exemple :

<ol start="5">
    <li>premier élément de la liste&nbsp;;</li>
    <li>deuxième élément&nbsp;;</li>
    <li>etc.</li>
</ol>

Ce code donnera :

premier élément de la liste ;
deuxième élément ;
etc.

Listes imbriquées

Ex :

<ol>
    <li>Premier élément de la liste</li>
    <ul>
        <li>Premier sous-élément</li>
        <li>Second sous-élément</li>
    </ul>
    <li>Deuxième élément</li>
</ol>

Premier élément de la liste

Premier sous-élément
Second sous-élément

Deuxième élément

Listes de descriptions

Contrairement aux autres types de listes, les listes de description, dl (definition list), n'utilisent pas la balise li pour les éléments de la liste, mais les sépare en deux parties : le terme, introduit par dt (definition term) et sa description introduite par dd (definition description).

Par exemple :

<dl>
    <dt>C</dt>      <dd>Un langage efficace</dd>
    <dt>Java</dt>   <dd>Un langage portable</dd>
    <dt>Pascal</dt> <dd>Un langage pédagogique</dd>
</dl>

Ce code donnera :

C: Un langage efficace
Java: Un langage portable
Pascal: Un langage pédagogique

Propriété des listes

En CSS, les listes sont hautement paramétrables, elles ont même des propriétés valables uniquement pour elles. D'une manière générale on peut se pencher sur :

les puces (petit élément devant chaque élément de la liste) ; ces puces pourront changer pour devenir un caractère prédéfini, personnalisable ou encore une image ;
le type de numérotation : latin, arabe, grec, …

Voir Le langage CSS/Listes.