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

Listes

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

Listes

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>:

Coloration du texte dans le tag HTML <li>:

Styles de mise en page du texte pour la tag HTML <li>:

Autres propriétés utiles pour le tag HTML <li>:

Support de Navigateurs

chrome edge firefox safari opera

Pratiquez vos connaissances

Quelle est la fonction de la balise HTML <li> ?
Trouvez-vous cela utile?