Balise HTML <li> : Maîtriser les éléments de liste

La balise HTML <li> (List Item) représente un élément individuel au sein d'une liste. Cette balise fondamentale du langage HTML permet de structurer des informations sous forme de listes, qu'elles soient ordonnées ou non ordonnées.

La balise <li> doit obligatoirement être utilisée à l'intérieur de balises parentes spécifiques :

• <ul> (Unordered List) : pour créer des listes à puces non ordonnées
• <ol> (Ordered List) : pour créer des listes numérotées ordonnées
• <menu> : pour créer des menus interactifs (HTML5)

Cette structure hiérarchique garantit une sémantique HTML correcte et améliore l'accessibilité web pour les lecteurs d'écran et le référencement SEO de votre page.

Syntaxe et utilisation de la balise <li>

La balise <li> nécessite une balise de fermeture obligatoire </li> pour respecter les standards HTML5 et XHTML. Voici les principes fondamentaux à retenir :

• LI : List Item (élément de liste individuel)
• OL : Ordered List (liste ordonnée avec numérotation automatique)
• UL : Unordered List (liste non ordonnée avec puces)

Chaque élément <li> peut contenir du texte simple, des balises inline, des images, des liens, ou même d'autres listes pour créer des listes imbriquées multi-niveaux.

Exemples pratiques d'utilisation de la balise <li>

Exemple 1 : Liste non ordonnée avec types de puces personnalisés

Cet exemple démontre comment personnaliser l'apparence des puces dans une liste non ordonnée HTML en utilisant l'attribut type (obsolète en HTML5, privilégiez CSS).

  📋 Copier le code

<!-- Liste avec différents types de puces -->
<ul>
  <li type="square">Puce carrée (square)</li>
  <!-- type="square" affiche un carré plein -->
  
  <li type="disc">Puce disque (disc - par défaut)</li>
  <!-- type="disc" affiche un cercle plein (valeur par défaut) -->
  
  <li type="circle">Puce cercle vide (circle)</li>
  <!-- type="circle" affiche un cercle vide -->
</ul>

Exemple 2 : Liste ordonnée avec numérotation personnalisée

Dans une liste ordonnée HTML, le type de numérotation est défini par la balise parente <ol>. Cet exemple montre comment créer des listes imbriquées avec numérotation hiérarchique.

  📋 Copier le code

<!-- Liste ordonnée principale avec numérotation romaine -->
<ol type="I">
  <!-- type="I" génère des chiffres romains majuscules (I, II, III...) -->
  
  <li>Élément A (niveau 1)</li>
  
  <!-- Sous-liste avec numérotation arabe -->
  <ol type="1">
    <!-- type="1" génère des chiffres arabes (1, 2, 3...) -->
    <li>Sous-élément A-1 (niveau 2)</li>
    <li>Sous-élément A-2 (niveau 2)</li>
  </ol>
  
  <li>Élément B (niveau 1)</li>
  <li>Élément C (niveau 1)</li>
</ol>
<!-- Résultat affiché :
I. Élément A
   1. Sous-élément A-1
   2. Sous-élément A-2
II. Élément B
III. Élément C
-->

Exemple 3 : Liste ordonnée avec démarrage personnalisé

L'attribut value permet de définir une valeur de départ spécifique pour la numérotation d'un élément de liste, utile pour reprendre une numérotation après un paragraphe explicatif.

  📋 Copier le code

<!-- Liste avec numérotation commençant à 5 -->
<ol>
  <li value="5">Cinquième étape du processus</li>
  <!-- value="5" force la numérotation à commencer à 5 -->
  
  <li>Sixième étape (incrémentation automatique)</li>
  <!-- Les éléments suivants s'incrémentent automatiquement -->
  
  <li>Septième étape</li>
</ol>
<!-- Résultat : 5, 6, 7 au lieu de 1, 2, 3 -->

Exemple 4 : Liste avec différents types de numérotation

HTML propose plusieurs formats de numérotation pour les listes ordonnées : numérique, alphabétique et romain, en majuscules ou minuscules.

  📋 Copier le code

<!-- Type "1" : Numérotation décimale (1, 2, 3...) -->
<ol type="1">
  <li>Premier élément</li>
  <li>Deuxième élément</li>
</ol>
<!-- Type "A" : Lettres majuscules (A, B, C...) -->
<ol type="A">
  <li>Option A</li>
  <li>Option B</li>
</ol>
<!-- Type "a" : Lettres minuscules (a, b, c...) -->
<ol type="a">
  <li>Point a</li>
  <li>Point b</li>
</ol>
<!-- Type "I" : Chiffres romains majuscules (I, II, III...) -->
<ol type="I">
  <li>Chapitre I</li>
  <li>Chapitre II</li>
</ol>
<!-- Type "i" : Chiffres romains minuscules (i, ii, iii...) -->
<ol type="i">
  <li>Section i</li>
  <li>Section ii</li>
</ol>

Attributs de la balise <li>

La colonne DTD dans le tableau suivant indique dans quelle définition de type de document HTML 4.01/XHTML 1.0 l'attribut est autorisé :

• S = Strict (recommandé pour le HTML moderne)
• T = Transitional (transition vers les standards)
• F = Frameset (déconseillé depuis HTML5)

Attributs optionnels de la balise <li>

Bonnes pratiques et accessibilité avec <li>

Pour une utilisation optimale de la balise <li> respectant les standards web modernes et améliorant le référencement naturel SEO :

• Toujours fermer la balise <li> avec </li> pour un code HTML valide
• Utiliser CSS plutôt que les attributs HTML obsolètes (type, value) pour le style
• Structurer logiquement vos listes pour améliorer la compréhension par les moteurs de recherche
• Éviter les listes trop profondes (plus de 3 niveaux d'imbrication) pour la lisibilité
• Ajouter des attributs ARIA si nécessaire pour l'accessibilité des applications web complexes

Exemple CSS moderne pour styliser les listes

Remplacez les attributs HTML obsolètes par des styles CSS modernes pour un meilleur contrôle visuel et une conformité aux standards actuels.

  📋 Copier le code

<!-- Code CSS pour personnaliser les listes -->
<style>
  /* Personnalisation d'une liste non ordonnée */
  ul.custom-list {
    list-style-type: square; /* Puces carrées */
    padding-left: 20px;
  }
  
  /* Personnalisation d'une liste ordonnée */
  ol.custom-numbered {
    list-style-type: upper-roman; /* Chiffres romains majuscules */
    counter-reset: item; /* Initialise le compteur */
  }
  
  /* Style personnalisé pour les éléments de liste */
  li.highlight {
    background-color: #f0f0f0;
    padding: 5px;
    margin-bottom: 5px;
    border-left: 3px solid #007bff;
  }
</style>
<!-- Utilisation du CSS -->
<ul class="custom-list">
  <li class="highlight">Élément stylisé avec CSS moderne</li>
  <li>Autre élément de la liste</li>
</ul>

      Vous êtes ici : Balise LI        Retour à la liste des balises HTML

Par carabde | Mis à jour le 30 novembre 2024