La Balise HTML <ul> : Liste Non Ordonnée

Balise <ul> : Unordered List en HTML5

La balise <ul> (unordered list) est un élément HTML5 fondamental permettant de créer des listes non ordonnées, c'est-à-dire des listes dont les éléments n'ont pas de hiérarchie numérotée. Chaque élément est représenté par une puce (bullet point) par défaut. Contrairement à la balise <ol> (ordered list), l'ordre des éléments n'a pas d'importance sémantique. La balise <ul> est essentielle pour la structuration sémantique du contenu web, l'accessibilité et le référencement naturel (SEO).

Syntaxe et fonctionnement de la balise <ul>

La balise <ul> est un élément de type bloc (block-level) en HTML5. Sa balise de fermeture </ul> est obligatoire. Une règle fondamentale : la balise <ul> ne peut contenir directement que des balises <li> (list item). Tout autre contenu placé directement dans <ul> sans passer par un <li> est invalide selon les spécifications W3C. Il est également possible d'imbriquer des listes <ul> à l'intérieur d'un <li> pour créer des listes hiérarchiques multi-niveaux, très utiles pour les menus de navigation et les structures de données complexes.

Voici un exemple de base illustrant la structure minimale d'une liste non ordonnée avec imbrication :

<!-- Liste non ordonnée simple avec sous-liste imbriquée -->
<p>Avantages du HTML sémantique :</p>
<ul>
  <li>Le HTML5 est accessible aux technologies d'assistance</li>
  <li>Le HTML5 améliore la structure du document</li>
  <li>Le HTML5 donne du sens à vos pages web :
    <ul>
      <!-- Sous-liste imbriquée : les <li> enfants héritent d'une puce différente -->
      <li>Meilleure expérience utilisateur (UX)</li>
      <li>Meilleur positionnement dans les moteurs de recherche</li>
      <li>Compatibilité avec les lecteurs d'écran (ARIA)</li>
    </ul>
  </li>
</ul>

Personnaliser les puces avec CSS : list-style-type

Depuis HTML5, les attributs de présentation (type, compact) sont obsolètes et supprimés. La personnalisation visuelle des listes <ul> s'effectue exclusivement via CSS avec la propriété list-style-type. Voici les valeurs les plus courantes pour contrôler l'apparence des puces d'une liste non ordonnée :

/* Puce ronde pleine (défaut navigateur) */
ul.puces-disc { list-style-type: disc; }
/* Puce carrée — bonne alternative visuelle */
ul.puces-carre { list-style-type: square; }
/* Puce cercle vide — souvent utilisée pour les sous-listes */
ul.puces-cercle { list-style-type: circle; }
/* Aucune puce — idéal pour les menus de navigation <nav> */
ul.sans-puce { list-style-type: none; }
/* Utilisation d'une image comme puce personnalisée */
ul.puce-image { list-style-image: url('puce-personnalisee.png'); }
/* Approche moderne : ::marker pseudo-élément CSS (support 2020+) */
ul li::marker { color: #e74c3c; font-size: 1.2em; }

L'utilisation de list-style-type: none combinée à padding: 0 et margin: 0 est la technique standard pour créer des menus de navigation horizontaux ou verticaux à partir d'une balise <ul>.

Exemple pratique : menu de navigation avec <ul>

L'un des usages les plus fréquents de la balise <ul> en développement web professionnel est la création de menus de navigation accessibles. En combinant <nav>, <ul>, <li> et <a>, on obtient une structure sémantique, accessible et optimisée pour le SEO :

<!-- Balise <nav> : indique aux moteurs de recherche et lecteurs d'écran
     qu'il s'agit d'un bloc de navigation principal -->
<nav aria-label="Navigation principale">
  <ul>
    <!-- Chaque <li> contient un lien de navigation -->
    <li><a href="/html/">HTML5</a></li>
    <li><a href="/css/">CSS3</a></li>
    <li><a href="/javascript/">JavaScript</a></li>
    <!-- aria-current="page" indique la page active aux technologies d'assistance -->
    <li><a href="/php/" aria-current="page">PHP</a></li>
  </ul>
</nav>

Attributs de la balise <ul>

La balise <ul> supporte les attributs universels HTML5 (id, class, style, lang, data-*, aria-*) et les attributs d'événements. Les attributs spécifiques ci-dessous sont historiques et obsolètes depuis HTML5 :

Bonnes pratiques SEO et accessibilité pour <ul> en 2026

Pour une utilisation optimale de la balise <ul> dans un contexte de référencement naturel (SEO) et d'accessibilité web (WCAG 2.2), respectez les recommandations suivantes :

1. Sémantique correcte : N'utilisez <ul> que pour des groupes d'éléments sans ordre particulier. Pour des étapes numérotées ou un classement, utilisez <ol>.

2. Structure valide : Les seuls enfants directs autorisés dans <ul> sont des éléments <li>. Validez votre HTML sur validator.w3.org.

3. Accessibilité ARIA : Pour les menus de navigation, ajoutez role="list" si vous retirez les styles par défaut, et utilisez aria-label pour décrire la liste aux lecteurs d'écran.

4. Rich Snippets : Les listes <ul> bien structurées dans vos articles peuvent contribuer à l'obtention de featured snippets (position zéro) dans Google.

5. Performance : Évitez les listes imbriquées sur plus de 3 niveaux — elles nuisent à la lisibilité et à l'expérience utilisateur (UX).

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

Par carabde | Mis à jour le 23 février 2026