En naviguant sur un site web, vous avez forcément déjà vu une liste : Un menu de navigation, des points à cocher dans un formulaire ou des éléments énumérés dans un article. Derrière chacun de ces éléments se cache une structure invisible, mais fondamentale : la balise <li> en HTML. À première vue, elle semble anodine, mais elle joue un rôle structurant essentiel dans la construction de pages web claires, accessibles et sémantiquement cohérentes. Apprendre à utiliser la balise <li> ne se limite pas à empiler des puces dans une page. C’est aussi comprendre la logique des listes en HTML, la relation entre les balises parentes comme <ul> ou <ol>, et l’importance de la hiérarchisation des contenus pour l’expérience utilisateur, mais aussi pour le référencement naturel (SEO).

Définition de la balise <li> et sa fonction dans le HTML

La balise <li>, abréviation de list item, est un élément fondamental du langage HTML utilisé pour définir un élément d’une liste. Elle s’inscrit dans une logique de structuration sémantique des contenus, où chaque élément <li> représente une unité d’information appartenant à un ensemble cohérent. Utilisée depuis les toutes premières versions de HTML dans les années 1990, cette balise est encore aujourd’hui omniprésente dans le développement web moderne.

Elle ne peut pas être utilisée seule : par définition, un <li> doit être contenu à l’intérieur d’une balise parent de type liste. Il en existe principalement trois :

• <ul> : pour les listes non ordonnées, où les éléments apparaissent avec des puces ou symboles
• <ol> : pour les listes ordonnées, où les éléments sont numérotés ou alphabétiques
• <menu> : historiquement utilisée pour les menus contextuels ou les barres d’outils, aujourd’hui moins courante mais encore supportée dans certains contextes interactifs

Voici un exemple de base utilisant la balise ul :

<ul>
  <li>Pommes</li>
  <li>Bananes</li>
  <li>Cerises</li>
</ul>

Dans cet exemple, chaque élément est défini individuellement avec une balise <li>. Le navigateur affichera la liste sous forme de puces, une pour chaque fruit. En remplaçant la balise parent <ul> par <ol>, on obtiendra une liste numérotée :

<ol>
  <li>Étape 1 : Préparer les ingrédients</li>
  <li>Étape 2 : Chauffer la poêle</li>
  <li>Étape 3 : Cuire les aliments</li>
</ol>

La balise <li> ne se limite pas à des listes simples. Elle peut contenir des structures complexes comme des liens hypertextes (<a>), des images (<img>), des paragraphes (<p>) ou même d’autres listes imbriquées. Cette capacité à accueillir presque n’importe quel contenu HTML la rend extrêmement polyvalente. Par exemple :

<ul>
  <li>
    <a href="https://exemple.com">Visitez notre page d’accueil</a>
  </li>
  <li>
    <p>Ce produit comprend :
      <ul>
        <li>Une batterie longue durée</li>
        <li>Un câble de recharge USB-C</li>
      </ul>
    </p>
  </li>
</ul>

Les usages de la balise <li> sont variés, allant bien au-delà des simples listes de texte. Voici quelques cas concrets où elle intervient :

• Menus de navigation : Souvent utilisés dans les barres de navigation (<nav>), les éléments du menu sont structurés avec des <li> pour chaque lien ;
• Checklists ou to-do lists : Que ce soit pour un tableau de bord personnel ou une interface de gestion de tâches, chaque tâche est une entrée dans une liste structurée ;
• FAQ ou guides : Les étapes ou points à traiter peuvent être énumérés via des <li>, facilitant la lecture linéaire ou hiérarchique du contenu ;
• Filtres de recherche : dans les sites e-commerce ou les interfaces de recherche avancée, chaque option de filtre (taille, prix, couleur) peut être listée via une balise <li>.

La balise <li> joue donc un rôle crucial dans plusieurs domaines :

• Structuration sémantique : Elle indique que les informations qu’elle contient sont liées entre elles par une logique d’ensemble, ce qui est fondamental pour l’accessibilité et la compréhension du contenu par les moteurs de recherche ;
• Expérience utilisateur : Une liste bien organisée améliore la lisibilité, la hiérarchie visuelle et la navigation, notamment sur mobile ou avec un lecteur d’écran ;
• Accessibilité numérique : Les technologies d’assistance, comme les lecteurs d’écran, détectent les listes grâce aux balises <ul>, <ol> et <li>, et les annoncent à l’utilisateur comme des structures logiques (« liste de trois éléments », par exemple) ;
• SEO : Les listes claires sont mieux interprétées par les moteurs de recherche. Google, par exemple, extrait souvent les listes <li> pour les afficher sous forme d’extraits enrichis (featured snippets).

Il est également intéressant de noter que les balises de liste peuvent être stylisées via CSS pour s’adapter au design du site. La puce peut être remplacée par une icône, un emoji ou supprimée entièrement avec list-style-type: none;. Le positionnement, l’espacement ou la couleur des <li> peut être modifié à volonté pour améliorer l’ergonomie ou respecter une charte graphique précise.

Ainsi donc, la balise <li> en HTML est un outil puissant, souple et indispensable pour toute structure de liste. Elle participe activement à la qualité du code, à la hiérarchisation des contenus, à l’expérience utilisateur et au bon référencement naturel. Bien qu’elle semble simple à première vue, sa maîtrise est essentielle pour créer des interfaces web professionnelles, accessibles et efficaces.

Le fonctionnement technique de <li> et les bonnes pratiques d’utilisation

Sur le plan technique, la balise <li> est un élément dit « de bloc », ce qui signifie qu’elle occupe automatiquement toute la largeur disponible dans son conteneur parent et commence sur une nouvelle ligne. Elle est conçue pour fonctionner exclusivement au sein de structures de listes comme <ul>, <ol> ou <menu>, qui organisent plusieurs éléments <li> dans une suite logique. Le rendu visuel d’une balise <li> dépend à la fois de son parent HTML et des styles CSS appliqués. Par défaut, les navigateurs utilisent les styles natifs suivants :

• Une balise <ul> (liste non ordonnée) affiche une puce noire (bullet point) devant chaque élément
• Une balise <ol> (liste ordonnée) affiche une numérotation automatique (1, 2, 3…) ou alphabétique (a, b, c…)

Voici un exemple de liste ordonnée simple :

<ol>
  <li>Étudier les bases du HTML</li>
  <li>Apprendre le CSS</li>
  <li>Maîtriser JavaScript</li>
</ol>

Et un exemple de liste imbriquée :

<ul>
  <li>Fruits
    <ul>
      <li>Pommes</li>
      <li>Poires</li>
    </ul>
  </li>
  <li>Légumes</li>
</ul>

Dans cet exemple, on observe une structure à deux niveaux : chaque sous-liste est encapsulée dans un élément <li> du niveau supérieur. Cette hiérarchisation est non seulement utile pour organiser le contenu, mais elle est également interprétée de manière logique par les moteurs de recherche et les lecteurs d’écran. En termes de personnalisation, la balise <li> est très souple. Grâce au CSS, il est possible d’en modifier pratiquement tous les aspects visuels :

• La suppression des puces :

ul {
  list-style-type: none;
  padding: 0;
}

• La personnalisation du symbole avec un pseudo-élément ::before :

li::before {
  content: "➤ ";
  color: #0073aa;
  font-weight: bold;
  margin-right: 8px;
}

Ce type de personnalisation permet d’adapter l’apparence des listes à la charte graphique d’un site, tout en conservant la structure sémantique HTML.

Quelques bonnes pratiques essentielles à respecter

• 1. Ne jamais utiliser <li> sans élément parent : La balise <li> doit obligatoirement être utilisée dans le contexte d’une liste. En dehors d’un conteneur <ul>, <ol> ou <menu>, elle n’a aucun sens sémantique ni comportement visuel cohérent. Les validateurs HTML signaleront cela comme une erreur ;
• 2. Bien structurer les listes imbriquées : Les listes imbriquées peuvent être utiles pour représenter des hiérarchies complexes (catégories et sous-catégories, étapes principales et sous-étapes, etc.), mais elles doivent rester lisibles. Au-delà de trois niveaux d’imbrication, la clarté du contenu diminue considérablement. Il est donc recommandé de simplifier la structure ou de la transformer en navigation multi-pages si besoin ;
• 3. Utiliser les listes uniquement pour des groupes d’éléments logiquement liés : La balise <li> n’est pas un outil de mise en page visuelle. Il ne faut pas détourner son usage pour aligner des blocs ou espacer des éléments sans logique de liste. Elle doit être utilisée uniquement lorsque les contenus partagent une relation de type « élément d’une série » ;
• 4. Ne pas mélanger <ul> et <ol> sans justification : Bien que techniquement possible, mélanger listes ordonnées et non ordonnées dans une même section doit être fait avec parcimonie. Par exemple, une <ol> pour décrire un processus, et une <ul> pour des éléments associés à une étape spécifique ;
• 5. Accessibilité : soigner l’ordre et la clarté : Les lecteurs d’écran informent les utilisateurs de la structure des listes (nombre d’éléments, position courante dans la liste, etc.). Une bonne utilisation des balises <li> permet donc une navigation plus fluide pour les personnes en situation de handicap. Évitez les listes artificielles ou visuellement stylisées qui ne correspondent pas à la sémantique HTML réelle.

Utilisation avancée : combiner <li> avec JavaScript et ARIA

Dans les applications web plus complexes (comme les menus déroulants ou les interfaces dynamiques), les balises <li> peuvent être enrichies avec des attributs ARIA (Accessible Rich Internet Applications) et contrôlées via JavaScript. Par exemple, dans un menu de navigation interactif :

<ul role="menubar">
  <li role="menuitem" tabindex="0">Accueil</li>
  <li role="menuitem" tabindex="0">Services</li>
  <li role="menuitem" tabindex="0">Contact</li>
</ul>

Ces rôles permettent aux technologies d’assistance de mieux comprendre la fonction de chaque élément. Couplés à des scripts d’interaction, ils permettent de créer des expériences utilisateur accessibles et dynamiques tout en conservant une base HTML propre et logique. Enfin, il est recommandé d’effectuer des tests réguliers avec des outils comme Lighthouse (dans Chrome DevTools) ou WAVE pour s’assurer que l’utilisation des listes respecte les standards d’accessibilité et de performance web.