# Liste HTML

> Une liste HTML regroupe des éléments « li » dans un conteneur « ul » (ordre indifférent) ou « ol » (séquence numérotée), avec un sens que la seule mise en forme visuelle ne donne pas.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/liste-html/

Regrouper des puces les unes sous les autres avec des tirets ne fait pas une liste : pour qu'un lecteur d'écran annonce « liste de 4 éléments » et permette d'y naviguer, il faut la structure native `<ul>`/`<ol>`/`<li>`. La balise `<ul>` convient quand l'ordre n'a pas d'importance (ingrédients, liens de menu), `<ol>` quand la séquence compte (étapes d'une procédure, classement).

## Où WordPress s'appuie dessus

L'éditeur de blocs transforme un bloc « Liste » en `<ul>` ou `<ol>` selon le bouton choisi dans la barre d'outils. Beaucoup de composants natifs de WordPress sont eux-mêmes des listes : le menu de navigation généré par `wp_nav_menu()` produit un `<ul>` de `<li>`, tout comme la liste des commentaires via `wp_list_comments()`. Un thème qui remplace ces balises par des `<div>` stylées casse cette sémantique et l'accessibilité qui va avec.

## Exemple

```
<ol>
  <li>Installer WordPress</li>
  <li>Choisir un thème</li>
  <li>Publier un premier article</li>
</ol>
```

On peut aussi imbriquer une liste dans un `<li>` pour créer des sous-niveaux, très utile dans un menu à tiroirs.

## Pièges fréquents

- Mettre des puces CSS (`list-style`) sur des `<div>` plutôt que d'utiliser une vraie liste : visuellement identique, invisible pour les technologies d'assistance.
- Oublier qu'un `<li>` doit toujours être un enfant direct de `<ul>` ou `<ol>`, jamais isolé ailleurs dans le document.
- Utiliser `<ol>` pour un menu de navigation où l'ordre n'a pas de sens sémantique particulier : `<ul>` suffit dans ce cas.