HTML dispose de trois types de listes, chacun avec une signification sémantique. Utiliser le bon type aide l'accessibilité (les lecteurs d'écran annoncent « liste, 3 éléments ») et la structure.
Apples
Bananas
Cherries
S'affiche avec des puces par défaut. À utiliser pour les menus de navigation, les listes de fonctionnalités, les tags — tout ce où la séquence n'a pas de sens.
<ol type="1" start="1">
<li>Preheat the oven</li>
<li>Mix ingredients</li>
<li>Bake for 20 minutes</li>
</ol>
S'affiche avec des chiffres. À utiliser pour les étapes, les classements, les instructions. Attributs : type (1, a, A, i, I), start (premier numéro), reversed.
<dl>
<dt>HTML</dt>
<dd>The markup language for web pages.</dd>
<dt>CSS</dt>
<dd>The styling language for web pages.</dd>
</dl>
<dt> est le terme, <dd> sa description — excellent pour les glossaires, les métadonnées et les paires clé/valeur.
<nav>
<ul>
<li><a href="/">Home</a>
<ul><li><a href="/sub">Sub-page</a></li></ul> <!-- nested submenu -->
</li>
</ul>
</nav>
Les menus de navigation sont conventionnellement balisés comme une <ul> à l'intérieur d'une <nav>.
Les listes ne sont pas seulement des puces — elles donnent une structure au contenu que les lecteurs d'écran annoncent et que vous pouvez styliser librement (les marqueurs par défaut sont facilement supprimés avec CSS).
Choisir <ul> vs <ol> vs <dl> communique un sens : non ordonnée, séquentielle ou terme-définition.