Tag HTML <li>
Le tag <li> spécifie les éléments individuels des Listes HTML. Le type de la liste est déterminé par les tags correspondants: <ul>- la liste à puces (non ordonnée), <ol> - la liste ordonnée, <menu>- le menu contextuel.
Dans le navigateur, les éléments de la liste ont une petite indentation sur le côté gauche.
Syntaxe
Le tag <li> est apparié. Dans la spécification de HTML5 l'utilisation du tag fermant est facultatif.
Le tag <li> est un élément de bloc, cela signifie que son contenu occupe toute la ligne et que tous les autres éléments sont transférés sur une autre ligne.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document.</title>
</head>
<body>
<p>Liste ordonnée</p>
<ol>
<li>Des snacks</li>
<li>Plat principale</li>
<li>Salades</li>
</ol>
<p>Liste non ordonnée</p>
<ul>
<li>Boissons froides</li>
<li>Boissons chaudes</li>
<li>Glaciers</li>
</ul>
</body>
</html>Résultat
Pour styler le tag <li>, utilisez la propriété CSS list-style-type.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du 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>La proprété list-style-type </h1>
<p>Exemple des listes non ordonnées:</p>
<ul class="a">
<li>Café</li>
<li>Tée</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Café</li>
<li>Tée</li>
<li>Coca Cola</li>
</ul>
<p>Exemple des listes ordonnées:</p>
<ol class="c">
<li>Café</li>
<li>Tée</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Café</li>
<li>Tée</li>
<li>Coca Cola</li>
</ol>
</body>
</html>Résultat
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| type | 1 A a I i disc square circle |
Spécifie le type de marqeur de la liste ordonnée ou non ordonnée.
L’attribut n’est plus utilisé. Au lieu de cela nous vous recommandons d’utiliser la propriété CSS list-style-type ou list-style-image, avec laquelle vous pouvez utiliser les images au lieu des marqeurs. |
| value | number | Indique le numéro à partir duquel la liste ordonnée va commencer. Des valeurs négatives peuvent être utilisées. Fonctionne uniquement avec une liste ordonnée. |
Le tag <li> supporte également les Attributs globaux et les Attributs d'événements.
Comment styler le tag HTML <li> ?
Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <li>:
- La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
- La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
- La propriété CSS font-size définit la taille de la police.
- La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
- La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
- La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.
Coloration du texte dans le tag HTML <li>:
- La propriété CSS color décrit la couleur du contenu et les décorations du texte.
- La propriété CSS background-color définit la couleur de fond d’un élément.
Styles de mise en page du texte pour la tag HTML <li>:
- La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
- La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
- La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
- La propriété CSS word-break spécifie où les lignes doivent être cassées.
Autres propriétés utiles pour le tag HTML <li>:
- La propriété CSS text-shadow ajoute des ombres au texte.
- La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
- La propriété CSS line-height spécifie la hauteur d’une ligne.
- La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
- La propriété CSS word-spacing permet de définir l’espacement entre les mots.
Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Pratiquez vos connaissances
Quelle est la fonction de la balise HTML <li> ?
Correcte!
Incorrecte!