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.
Types de liste
[modifier | modifier le wikicode]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
[modifier | modifier le wikicode]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 ;</li>
<li>deuxième élément ;</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
[modifier | modifier le wikicode]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 ;</li>
<li>deuxième élément ;</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 ;</li>
<li>deuxième élément ;</li>
<li>etc.</li>
</ol>
Ce code donnera :
- premier élément de la liste ;
- deuxième élément ;
- etc.
Listes imbriquées
[modifier | modifier le wikicode]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
[modifier | modifier le wikicode]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
[modifier | modifier le wikicode]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.