HTML <li> Tag
Exemple
Une liste HTML ordonnée (<ol>) et une liste non ordonnée (<ul>) :
<ol>
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ol>
<ul>
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
La <li> définit un élément de liste.
La <li> est utilisée à l'intérieur des listes ordonnées ( <ol> ), des listes non ordonnées ( <ul> ), et dans les listes de menus ( <menu> ).
Dans <ul> et <menu>, les éléments de liste sont généralement affichés avec des puces.
Dans <ol>, les éléments de liste sont généralement affichés avec des numéros ou des lettres.
Astuce : Utilisez CSS pour styliser les listes .
Support des Navigateurs
| Élément | |||||
|---|---|---|---|---|---|
| <li> | Oui | Oui | Oui | Oui | Oui |
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| value | nombre | Seulement pour les listes <ol>. Spécifie la valeur de départ d'un élément de liste. Les éléments de liste suivants s'incrémenteront à partir de ce nombre. |
Attributs Globaux
La <li> prend également en charge les Attributs Globaux en HTML .
Attributs d'Événement
La <li> prend également en charge les Attributs d'Événement en HTML .
Plus d'Exemples
Exemple
Utilisation de l'attribut value dans une liste ordonnée :
<ol>
<li value="100">Café</li>
<li>Thé</li>
<li>Lait</li>
<li>Eau</li>
<li>Jus</li>
<li>Bière</li>
</ol> Exemple
Définir différents types de style de liste (avec CSS) :
<ol>
<li>Café</li>
<li style="list-style-type:lower-alpha">Thé</li>
<li>Lait</li>
</ol>
<ul>
<li>Café</li>
<li style="list-style-type:square">Thé</li>
<li>Lait</li>
</ul> Exemple
Créer une liste à l'intérieur d'une liste (une liste imbriquée) :
<ul>
<li>Café</li>
<li>Thé
<ul>
<li>Thé noir</li>
<li>Thé vert</li>
</ul>
</li>
<li>Lait</li>
</ul> Exemple
Créer une liste imbriquée plus complexe :
<ul>
<li>Café</li>
<li>Thé
<ul>
<li>Thé noir</li>
<li>Thé vert
<ul>
<li>Chine</li>
<li>Afrique</li>
</ul>
</li>
</ul>
</li>
<li>Lait</li>
</ul> Pages Associées
Tutoriel HTML : Listes HTML
Référence DOM HTML : Objet Li
Tutoriel CSS : Styliser les Listes
Paramètres CSS par Défaut
La plupart des navigateurs afficheront l'élément <li> avec les valeurs par défaut suivantes :
li {
display: list-item;
}