Balise HTML <li>
La balise <li> définit les éléments d'une liste en HTML. Description, attributs et exemples.
La balise HTML <li> définit un élément unique à l'intérieur d'une liste HTML. Elle est un enfant des éléments <ul> (liste non ordonnée), <ol> (liste ordonnée) ou <menu>. Dans les listes non ordonnées et les menus, les éléments sont affichés avec un point de puce par défaut. Dans les listes ordonnées, chaque élément reçoit un numéro ou une lettre sur le côté gauche qui s'incrémente automatiquement.
Cette page couvre la syntaxe de <li>, l'attribut value, la mise en forme des marqueurs de liste avec CSS, ainsi que les remarques d'accessibilité pour les lecteurs d'écran.
Syntaxe
Un élément de liste s'écrit entre les balises ouvrantes <li> et fermantes </li> :
<li>List item text</li><li> est un élément de contenu de flux : chaque élément commence sur une nouvelle ligne et occupe toute la largeur disponible.
En HTML5, la balise fermante </li> est facultative — le navigateur ferme l'élément automatiquement lorsqu'il rencontre le prochain <li> ou la fin de la liste parente. L'inclusion de </li> reste recommandée pour la lisibilité et pour éviter les surprises dans les outils.
Exemple de listes ordonnées et non ordonnées :
Liste de menu — Exemple de la balise HTML <li> — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>Ordered list</p>
<ol>
<li>Appetizers</li>
<li>Main Course</li>
<li>Salads</li>
</ol>
<p>Unordered list</p>
<ul>
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
</body>
</html>L'attribut value
L'attribut value définit le numéro ordinal d'un élément de liste. Il ne fonctionne que sur les éléments <li> à l'intérieur d'une liste ordonnée (<ol>) et est ignoré dans les listes non ordonnées.
Définir value ne change pas seulement cet élément — la numérotation continue à partir de lui. Dans l'exemple ci-dessous, le premier élément est forcé à 5, de sorte que les éléments suivants deviennent automatiquement 6 et 7 :
5. Coffee
6. Tea
7. Coca ColaPour modifier uniquement le point de départ de la liste entière, préférez l'attribut start sur l'élément <ol>. Utilisez value lorsque vous devez remplacer le numéro d'un élément spécifique au milieu d'une liste.
La valeur de l'attribut value doit être un entier valide. Les valeurs négatives sont autorisées.
Exemple de l'attribut value :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<ol>
<li value="5">Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>Mise en forme du marqueur d'élément de liste
Pour mettre en forme l'élément <li>, vous pouvez utiliser les propriétés CSS list-style, list-style-type, list-style-image et list-style-position.
Exemple de mise en forme du marqueur d'élément de liste :
Propriété list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h1>The list-style-type property</h1>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>Vous pouvez remplacer les puces par une image à l'aide de la propriété CSS list-style-image.
Exemple de marqueur image :
Propriété list-style-image
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: url("https://api.w3docs.com/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
}
</style>
</head>
<body>
<h2>List-style-image property example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>La propriété CSS list-style-position indique si le marqueur de liste doit apparaître à l'intérieur ou à l'extérieur de la boîte de l'élément de liste.
Exemple de positionnement intérieur et extérieur d'un marqueur :
Propriété list-style-position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li {
border: 1px solid #666;
padding: 5px;
}
.inside {
list-style-position: inside;
}
.outside {
list-style-position: outside;
}
</style>
</head>
<body>
<h2>List-style-position property example</h2>
<p>Here the list-style is positioned "inside".</p>
<ul class="inside">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>Here the list-style is positioned "outside".</p>
<ul class="outside">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
type | 1, A, a, I, i, disc, square, circle | Définit le type de puce pour les listes ordonnées ou non ordonnées. Cet attribut est obsolète en HTML5. Utilisez plutôt les propriétés CSS list-style-type ou list-style-image. |
value | number | Indique la valeur numérique de l'élément de liste. Vous pouvez utiliser des valeurs négatives. Ne fonctionne qu'avec l'élément <li> à l'intérieur d'une liste ordonnée. |
La balise <li> prend en charge les attributs globaux et les attributs d'événement.
Cibler <li> avec CSS
En plus du marqueur, vous pouvez mettre en forme la boîte de l'élément comme n'importe quel autre élément. Utilisez le sélecteur de type li pour atteindre tous les éléments de liste, ou limitez-le à une liste spécifique avec une classe ou un sélecteur descendant :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
/* All list items on the page */
li {
padding: 8px;
line-height: 1.6;
}
/* Only items inside lists with class "menu" */
ul.menu > li {
list-style: none;
border-bottom: 1px solid #ddd;
}
/* Style the marker color separately */
li::marker {
color: #0a7cff;
}
</style>
</head>
<body>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>Le pseudo-élément ::marker met en forme la puce ou le numéro sans affecter le texte de l'élément — pratique pour recolorer ou redimensionner les marqueurs.
Accessibilité
Les lecteurs d'écran traitent les listes comme un groupe : ils annoncent la liste, le nombre total d'éléments et la position de chaque élément (par exemple, « liste, 3 éléments, élément 1 »). Ce contexte aide les utilisateurs à comprendre la structure, donc regroupez les éléments connexes dans un seul <ul> ou <ol> plutôt que de simuler une liste avec des <div> et des sauts de ligne.
Supprimer les puces avec list-style: none peut amener VoiceOver de Safari à ne plus reconnaître l'élément comme une liste, de sorte que le nombre d'éléments n'est plus annoncé. Si vous supprimez les marqueurs pour les menus de navigation, ajoutez role="list" sur le <ul> pour préserver la sémantique de liste.
<ul role="list" style="list-style: none;">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>Balises associées
<ul>— liste non ordonnée (à puces)<ol>— liste ordonnée (numérotée)<menu>— une liste de commandes ou d'éléments de menu- Listes HTML — aperçu de tous les types de listes