Balise HTML li – L’élément de liste

Définition

L’élément HTML li représente un élément de liste d’une liste ordonnée ou non ordonnée (mais pas d’une liste de définitions).

On va donc placer les éléments li à l’intérieur d’un élément ol (liste ordonnée) ou ul (liste non ordonnée) et utiliser autant d’éléments li que notre liste contient d’éléments de liste.

Un marqueur (ou « puce ») va être affiché devant la partie textuelle de chaque élément de liste li. L’apparence de ce marqueur est définie par le type de liste créée : ce sera par défaut un nombre qui va s’incrémenter pour une liste ordonnée ou un disque (puce) pour des listes non ordonnée.

On va ensuite pouvoir modifier la position ou l’apparence du marqueur grâce aux propriétés CSS list-style-type ou list-style-image et list-style-position.

 

Attributs

Dans le cas où l’élément de liste li appartient à une liste ordonnée, on va pouvoir utiliser un attribut value pour indiquer la valeur affichée par le marqueur.

On va ainsi pouvoir faire démarrer le compteur d’une liste ordonnée à partir de n’importe quel entier et non pas nécessairement à partir de 1.

Notez que les éléments li suivants vont automatiquement s’incrémenter, pas la peine donc de préciser d’attribut value pour chaque élément li si on souhaite que les valeurs des marqueurs des éléments de liste se suivent.

 

Exemples d’utilisation

Dans l’exemple suivant, on utilise des éléments li pour ajouter des éléments dans des listes non ordonnées ou ordonnées HTML.

See the Pen
Balise HTML li
by Pierre (@pierregiraud)
on CodePen.

 

Compatibilité navigateurs

Ces informations sont tirées du site caniuse.com. Les cases vertes indiquent que le navigateur supporte l’élément. Les cases grises indiquent que le support est inconnu. Les cases rouges indiquent que l’élément n’est pas supporté. Le chiffre dans chaque case correspond à la version du navigateur concernée.

Element HTML li support navigateur

 

Extraits de la documentation officielle

Ces informations sont extraites de la spécification officielle (W3C)

Element HTML li reference documentation officielle

Laisser un commentaire