Les listes en HTML5
Introduction
Lorsque l'on veut énumérer certains éléments, comme une liste de course par exemple, ou une liste de choses à faire, ou tout simplement une liste d'articles sur le HTML de ce blog, on va utiliser les « listes » en HTML.
Il existe trois types de listes en HTML :
- Les listes à puces dites aussi désordonnées ;
- Les listes numérotées dites aussi ordonnées ;
- les listes de description appelées liste de définitions avant HTML5.
Les différents types de listes
Les listes à puces classiques dites désordonnées.
Dans ce cas de figure, on ne s'intéresse pas à l'ordre dans lequel les lignes s'affichent. On va avoir deux types de balises différentes, l'une va englober la liste entière avec « <ul> » et l'autre va entourer chaque élément de cette liste avec « <li> ».
Cela donne :
<ul>
<li>Élément de la liste</li>
<li>Un autre élément de la liste</li>
<li>Encore un autre élément de la liste</li>
<li>Oui, un autre élément de la liste</li>
</ul>
Une liste à puce classique a normalement un rond blanc ou noir au début de chaque élément de la liste.
Les listes à puces numérotées dites aussi ordonnées
On peut vouloir créer une liste qui aura un ordre bien déterminé avec des numéros au début. Cela peut être pour un sommaire, où lorsque l'ordre des titres à une importance, ou pour une énumération d'éléments avec un ordre de priorité.
On va englober la liste avec « <ol> » et chaque élément de la liste est entourée de « <li> » :
<ol>
<li>Élément de la liste</li>
<li>Un autre élément de la liste</li>
<li>Encore un autre élément de la liste</li>
<li>Oui, un autre élément de la liste</li>
</ol>
On va obtenir :
la liste de description
Cette liste a la particularité d'avoir non seulement les éléments de la liste mais aussi une description en dessous de chacun ligne.
Le principe de base est le même, mais on va rajouter une balise pour la description :
- Balise englobante : <dl> ;
- Balise par élément : <dt> ;
- Balise de définition : <dd>.
On va obtenir, par exemple :
<body>
<dl>
<dt>Premier élément de la liste</dt>
<dd>Définition du premier élément</dd>
<dt>Deuxième élément de la liste</dt>
<dd>Définition du deuxième élément</dd>
<dt>Troisième élément de la liste</dt>
<dd>Définition du troisième élément</dd>
</dl>
</body>
Le résultat sera que la définition s'affichera en dessous de l'élément avec un décalage sur la ligne.
Imbriquer des listes
Il est tout à fait possible d'avoir une liste dans une liste. On va créer une liste avec <ul> puis un élément avec <li> mais sans refermer la balise, on va y insérer une autre balise <ul> puis <li>.
Cela donne :
<body>
<ul>
<li>Élément de la liste</li>
<li>Un autre élément de la liste
<ul>
<li>Voici un élément imbriqué</li>
<li>Voici un deuxième élément imbriqué</li>
</ul>
</li>
<li>Encore un autre élément de la liste</li>
<li>Oui, un autre élément de la liste</li>
</ul>
</body>
On peut constater que le style de puce change lorsqu'on descend dans l'imbrication des listes.
L'apparence d'une liste
Dans les anciennes versions HTML, on pouvait modifier l'apparence des puces, mais cela n'est plus possible depuis HTML5 : On va plutôt utiliser le CSS et je vous expliquerai tout dans un prochain article.
Les commentaires
Il n'y a pas encore de commentaire, mais cela ne serait tarder ...