Balise HTML <li>
Exemple
Une liste HTML ordonnée (<ol>) et une non ordonnée (<ul>) :
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La <li>balise définit un élément de liste.
La <li>balise est utilisée dans les listes ordonnées ( <ol> ), les listes non ordonnées ( <ul> ) et dans les listes de menus ( <menu> ).
Dans <ul> et <menu>, les éléments de la liste seront généralement affichés avec des puces.
Dans <ol>, les éléments de la liste seront généralement affichés avec des chiffres ou des lettres.
Astuce : utilisez CSS pour styliser les listes .
Prise en charge du navigateur
| Element | |||||
|---|---|---|---|---|---|
| <li> | Yes | Yes | Yes | Yes | Yes |
Les attributs
| Attribute | Value | Description |
|---|---|---|
| value | number | Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number |
Attributs globaux
La <li>balise prend également en charge les attributs globaux en HTML .
Attributs d'événement
La <li>balise 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">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
Exemple
Définissez différents types de style de liste (avec CSS) :
<ol>
<li>Coffee</li>
<li
style="list-style-type:lower-alpha">Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li
style="list-style-type:square">Tea</li>
<li>Milk</li>
</ul>
Exemple
Créer une liste à l'intérieur d'une liste (une liste imbriquée) :
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Exemple
Créez une liste imbriquée plus complexe :
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
Pages connexes
Tutoriel HTML : Listes HTML
Référence HTML DOM : Objet Li
Tutoriel CSS : styliser les listes
Paramètres CSS par défaut
La plupart des navigateurs afficheront l' <li>élément avec les valeurs par défaut suivantes :
li {
display: list-item;
}