La balise <ul> fait partie des éléments fondamentaux du langage HTML. Utilisée pour créer des listes non ordonnées, elle permet d’organiser visuellement des ensembles d’informations sous forme de puces. Simples à mettre en œuvre, les listes <ul> sont omniprésentes dans la structure des sites web, que ce soit pour des menus de navigation, des caractéristiques produits ou des checklists. Découvrez dans cet article leur définition, leur fonctionnement technique et les bonnes pratiques pour les utiliser efficacement dans vos projets web.

Une définition de la balise <ul> en html : Une liste non ordonnée

La balise HTML <ul> est utilisée pour créer ce qu’on appelle une liste non ordonnée, c’est-à-dire une liste où les éléments ne suivent pas un ordre numérique, alphabétique ou hiérarchique. Visuellement, ces listes sont affichées avec des symboles typographiques appelés bullet points (puces), qui soulignent que les éléments sont présentés sur un même plan logique, sans hiérarchie imposée. L’acronyme ul vient de l’anglais unordered list. Cette balise fait partie du socle fondateur du langage HTML (HyperText Markup Language), un langage de balisage né à la toute fin des années 1980 au CERN, en Suisse, sous l’impulsion du physicien britannique Tim Berners-Lee. Dans les premières spécifications du HTML 2.0 publiées en 1995 par le W3C (World Wide Web Consortium), les balises <ul> et <li> figuraient déjà comme éléments standards de structuration du contenu textuel.

Chaque élément de la liste est introduit par la balise <li>, pour list item, et doit obligatoirement être contenu dans une balise parent <ul>. Autrement dit, <ul> sert de conteneur principal, et chaque puce est représentée individuellement par un élément <li>. Ce modèle imbriqué garantit une sémantique claire, lisible aussi bien par les navigateurs que par les moteurs de recherche ou les lecteurs d’écran. Historiquement, les listes <ul> ont été massivement utilisées pour des raisons pratiques : elles permettent de présenter rapidement une suite d’items homogènes, par exemple des caractéristiques produit, des étapes à suivre, ou encore des liens de navigation. Elles sont aussi très faciles à styliser via le CSS (introduit en 1996), ce qui leur a permis de s’adapter visuellement à tous les types de design, du plus sobre au plus interactif.

Depuis HTML5, publié en octobre 2014, la balise <ul> conserve la même syntaxe, mais elle est davantage intégrée à une logique de structuration sémantique globale du document, notamment dans les balises <nav> pour les menus ou <aside> pour les encarts. Elle est désormais reconnue comme un outil essentiel de l’accessibilité, garantissant une lecture fluide pour les technologies d’assistance.

La structure de base d’une liste <ul> en HTML

En HTML, une liste non ordonnée se compose d’une balise d’ouverture <ul> et d’une balise de fermeture </ul>. À l’intérieur de cette balise, chaque élément de la liste est encadré par une paire <li> (list item). Le tout forme une structure cohérente, facilement interprétée par les navigateurs et les moteurs de rendu HTML.

Voici un exemple minimaliste d’une liste non ordonnée :

<ul>
  <li>Pain</li>
  <li>Fromage</li>
  <li>Tomates</li>
</ul>

Ce code génère une liste de trois éléments. Par défaut, chaque ligne est précédée d’un symbole circulaire noir (généralement une puce pleine), qui indique visuellement que les éléments sont à valeur égale et ne suivent pas de hiérarchie spécifique. Le rendu est généralement interprété comme suit :

• Pain
• Fromage
• Tomates

Cette structure est particulièrement utile pour énumérer des idées, lister des produits, afficher des options ou organiser des menus simples. Elle est également largement utilisée dans les gabarits de navigation ou dans la mise en forme d’inventaires ou de listes à cocher.

Il est essentiel de noter que chaque élément <li> peut contenir du texte brut, mais aussi des balises HTML plus complexes. Par exemple, un lien <a>, une image <img>, ou même une autre liste imbriquée peuvent être inclus dans une balise <li>. Cette flexibilité rend les listes HTML très adaptables à différents contextes d’usage, qu’il s’agisse de contenus éditoriaux, de composants d’interface utilisateur ou de blocs de navigation avancés.

Enfin, la structure de base des listes <ul> constitue une brique essentielle pour la structuration des documents HTML selon les normes du W3C. Elle permet de maintenir une séparation claire entre le contenu, la hiérarchie logique, et le style (qui, lui, sera géré via les feuilles de style CSS).

Le fonctionnement technique de <ul> et les bonnes pratiques SEO

La balise <ul> joue un double rôle dans le développement web : d’une part, elle structure l’information de manière lisible et accessible, et d’autre part, elle contribue à la clarté sémantique du contenu HTML, ce qui est aussi bénéfique pour le référencement naturel (SEO). Sur le plan technique, la balise <ul> fonctionne comme un conteneur logique regroupant plusieurs éléments <li>. Ces derniers peuvent contenir divers types de contenu HTML : du texte simple, des liens hypertextes, des images, des icônes SVG, des balises <span> ou encore des balises <ul> imbriquées pour créer des structures plus complexes. Voici un tableau récapitulatif des principaux comportements techniques et recommandations autour de l’usage des listes non ordonnées :

Exemple de liste imbriquée

Plus que des mots, un exemple avec l’imbrication :

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

Ce code HTML produit une liste principale contenant deux éléments : « Fruits » et « Légumes ». Le premier contient à son tour une sous-liste de deux fruits. Ce type d’imbrication est extrêmement courant dans les menus de navigation, les filtres de recherche ou encore les catégories d’un site e-commerce. Du point de vue du référencement naturel, ces listes permettent de mieux structurer l’information aux yeux des moteurs. Lorsqu’elles sont bien utilisées, elles peuvent enrichir un extrait optimisé (featured snippet), apparaître dans des réponses en « position zéro », ou alimenter des résultats enrichis dans la SERP. En résumé, la balise <ul> est à la fois un outil technique, ergonomique et stratégique pour l’optimisation SEO.

La personnalisation visuelle avec CSS de <ul>

Par défaut, les listes <ul> ont un style imposé par le navigateur. Grâce au CSS, vous pouvez facilement modifier leur apparence :

• list-style-type : permet de changer le type de puce (disque, cercle, carré, aucun).
• margin et padding : ajustent l’alignement de la liste.
• list-style-image : remplace les puces par des images personnalisées.

ul {
  list-style-type: square;
  padding-left: 20px;
}

Ce style affichera une liste avec des carrés à la place des puces rondes, et ajoutera un retrait à gauche.

Pour conclure : La balise est simple mais essentielle en HTML

La balise <ul> joue un rôle fondamental dans la structuration des contenus HTML. Elle permet de présenter des informations sous forme de liste sans hiérarchie formelle, ce qui en fait un outil idéal pour les menus de navigation, les caractéristiques produits, les listes de tâches, ou tout contenu regroupé de manière logique. Grâce à sa simplicité d’utilisation et sa compatibilité avec tous les navigateurs, elle constitue un élément de base de la conception web, facilement personnalisable et parfaitement intégrée dans les standards du HTML5.