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.
Extraits de la documentation officielle
Ces informations sont extraites de la spécification officielle (W3C)
