UL LI HTML : une liste bien structurée, des puces aux sous-listes

En HTML, <ul> regroupe une liste non ordonnée et <li> délimite chaque élément de cette liste. Pour afficher plusieurs caractéristiques, ingrédients ou rubriques avec des puces, placez les éléments <li> à l’intérieur de <ul>. Le HTML organise le contenu ; le CSS détermine ensuite l’apparence des marqueurs et les espacements.

Écrire une première liste avec <ul> et <li>

L’abréviation ul signifie unordered list, soit « liste non ordonnée ». L’abréviation li signifie list item, soit « élément de liste ». Ces deux balises remplissent des fonctions complémentaires : la première crée le groupe, la seconde identifie chacune de ses entrées.

Voici un exemple minimal à insérer dans le corps d’un document HTML ou dans un bloc HTML personnalisé de WordPress :

<ul>

<li>Clavier</li> <li>Souris</li> <li>Écran</li>

</ul>

Le navigateur affiche alors cette liste :

• Clavier
• Souris
• Écran

Chaque paire <li>…</li> correspond à une entrée distincte. Pour ajouter un accessoire, ajoutez un nouvel élément avant la fermeture </ul>. Même si certaines fermetures peuvent être omises dans des conditions précises en HTML, écrire explicitement toutes les balises de fermeture facilite la lecture et évite les erreurs lors des modifications.

Le conteneur <ul> ne doit pas recevoir directement le texte des entrées : ce texte appartient aux éléments <li>. De même, un <li> ne s’utilise pas seul au milieu de paragraphes pour obtenir un retrait. Il doit appartenir à une liste adaptée.

Choisir une liste selon le sens, pas selon les puces

Une liste non ordonnée ne signifie pas que les éléments sont disposés au hasard. Vous pouvez les classer par thème, préférence ou ordre alphabétique. Le critère décisif est ailleurs : changer leur position modifie-t-il le sens ou la bonne exécution du contenu ? Si oui, une liste ordonnée est généralement plus appropriée.

Dans une liste ordonnée, <ol> remplace <ul>, mais chaque entrée reste un <li>. Le navigateur affiche généralement des numéros. L’attribut value d’un <li> peut intervenir dans cette numérotation ; il n’a pas de signification pour une liste <ul>.

Une bonne amorce permet aussi de vérifier la cohérence d’une liste. Écrivez une courte phrase comme « Le colis contient : », puis lisez-la avec chaque entrée. Si certaines réponses désignent des objets et d’autres décrivent des actions, le regroupement mérite probablement d’être revu. Ce test de raccordement aide à construire des éléments parallèles, plus faciles à parcourir et à comparer.

Les caractéristiques produit, inventaires et ensembles de rubriques se prêtent bien à <ul>. Une procédure exige plutôt <ol>. Quant à une checklist interactive, les puces seules ne suffisent pas : il faut également prévoir des contrôles permettant de cocher les tâches.

Imbriquer une sous-liste dans le bon élément

Une sous-liste exprime une relation de dépendance : plusieurs éléments détaillent une entrée principale. Elle se place à l’intérieur du <li> concerné, avant sa fermeture, et non entre deux éléments de premier niveau.

Voici une structure avec deux entrées principales, dont la première contient deux entrées secondaires :

<ul> <li>Périphériques <ul> <li>Clavier</li> <li>Souris</li> </ul> </li> <li>Écran</li> </ul>

Le rendu conserve cette hiérarchie :

• Périphériques
  • Clavier
  • Souris
• Écran

La fermeture du premier <li> intervient donc après celle de la sous-liste. Placer cette dernière après </li> ferait perdre le rattachement structurel attendu, même si le navigateur semble produire un affichage acceptable.

Un élément <li> peut contenir du texte, des liens, des images, des paragraphes ou d’autres listes. Une entrée longue peut ainsi associer un intitulé et une explication développée. Cette souplesse ne justifie toutefois pas une imbrication excessive : si plusieurs niveaux deviennent difficiles à suivre, des sections avec des titres seront souvent plus lisibles.

Il est également possible de combiner une liste ordonnée et une liste non ordonnée. Une étape de procédure peut, par exemple, contenir une liste de matériel sans ordre imposé. Le choix de chaque conteneur dépend alors du sens de son propre groupe.

Personnaliser les marqueurs et l’espacement avec CSS

Les puces ne se règlent plus avec les anciens attributs de présentation. Utilisez une classe sur la liste, puis une règle CSS ciblée. Par exemple, le HTML <ul class="accessoires"> permet d’appliquer le style suivant sans modifier toutes les listes du site :

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

La propriété list-style-type définit le marqueur. Les valeurs disc, circle et square correspondent respectivement à un disque plein, un cercle et un carré. Sans règle explicite, l’apparence peut varier selon les styles du navigateur, le thème et le niveau d’imbrication.

Supprimer ou remplacer les puces

La déclaration list-style-type: none; supprime les marqueurs. Elle peut convenir à une liste de navigation, mais les entrées doivent rester visuellement identifiables grâce à leur disposition ou à leur espacement. La propriété list-style-image permet d’utiliser une image comme marqueur ; vérifiez alors son alignement et sa lisibilité, notamment lorsque le texte occupe plusieurs lignes.

Régler les retraits sans comprimer le texte

Le padding règle l’espacement intérieur, notamment le retrait réservé aux puces ; margin gère les marges externes. Pour espacer les entrées, une règle comme .accessoires li { margin-bottom: 0.5em; } est souvent plus claire qu’une succession d’espaces saisis manuellement.

Les attributs historiques type et compact sur <ul> sont à éviter. MDN recommande le CSS et précise que l’interprétation de compact dépend du navigateur. La documentation évoque notamment line-height: 80% pour un effet compact, mais une hauteur de ligne aussi réduite peut gêner la lecture : privilégiez un réglage adapté au contenu.

Vérifier la structure, l’accessibilité et le rendu final

Une suite de paragraphes commençant par le caractère « • » ressemble à une liste sans en porter la structure HTML. Avec de véritables éléments <ul> et <li>, les technologies d’assistance peuvent identifier le groupe et, selon leur fonctionnement, annoncer son nombre d’éléments.

Cette structure facilite aussi la compréhension du document par les outils qui l’analysent. Elle ne garantit cependant ni meilleur classement dans les moteurs de recherche, ni extrait enrichi automatique. Son intérêt premier reste de représenter correctement les relations entre les contenus.

Avant de publier, contrôlez les points suivants :

• Chaque entrée possède son propre élément <li>.
• Chaque sous-liste se trouve dans l’entrée qu’elle détaille.
• Le choix entre <ul> et <ol> correspond au sens du contenu.
• Les marqueurs et les retraits restent lisibles sur mobile.
• Les règles CSS ciblent la bonne liste sans affecter les autres.

Dans WordPress, vérifiez enfin la page publiée : les styles du thème peuvent différer de l’aperçu de l’éditeur. Si le rendu surprend, inspectez d’abord les marges, le padding et list-style-type, plutôt que de remplacer une structure correcte par des puces saisies à la main.