Balise HTML <li>
La balise HTML <li> définit des éléments distincts dans une liste HTML. Les balises <ul> et <ol> définissent respectivement les listes non ordonnées et ordonnées. La balise <menu> définit le menu contextuel. Les éléments de liste sont généralement affichés à l'aide de puces dans les menus et les listes non ordonnées. Dans les listes ordonnées, ils sont généralement affichés avec un chiffre ou une lettre sur le côté gauche.
Syntaxe
La balise <li> s'utilise par paires. Le contenu est écrit entre la balise d'ouverture (<li>) et la balise de fermeture (</li>). La balise <li> est un élément de contenu de flux ; elle commence sur une nouvelle ligne et occupe toute la largeur disponible.
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 spécifie un nombre pour un élément de liste. Il n'est utilisé qu'avec l'élément <li> à l'intérieur d'une liste ordonnée. Notez qu'en HTML5 moderne, l'attribut start sur l'élément <ol> est préféré pour contrôler le numéro de départ de la liste.
DANGER
La valeur de l'attribut value doit être un entier valide.
Exemple de l'attribut value :
Balise HTML <li> avec la propriété list-style-type | Exemple | W3Docs
<!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://www.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 spécifie 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>
.inside {
list-style-position: inside;
}
li {
border: 1px solid #666;
padding: 5px;
}
.outside {
list-style-position: outside;
}
li {
border: 1px solid #666;
padding: 5px;
}
</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 | Spécifie la valeur numérique de l'élément de liste. Vous pouvez utiliser des valeurs négatives. Il 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.
Comment mettre en forme une balise HTML <li>
{
"tag_name": "li"
}Pratique
Que définit la balise HTML <li> ?