Les listes

Une liste de courses et une recette sont toutes les deux des listes, mais une seule des deux ne marche plus si l'on change l'ordre. HTML a un élément différent pour chacune.

Listes non ordonnées et ordonnées

Si l'ordre des éléments n'a pas d'importance, utilise une liste non ordonnée, <ul>. Les navigateurs marquent chaque élément d'une puce. Si l'ordre compte, comme pour les étapes d'une recette ou un classement, utilise une liste ordonnée, <ol>, et le navigateur numérote les éléments pour toi. Dans les deux cas, chaque élément est un <li>, un élément de liste, et les seuls éléments permis directement dans <ul> ou <ol> sont des éléments <li>. Le texte et les autres éléments vont à l'intérieur des éléments de liste.

<h2>You will need</h2>
<ul>
  <li>500 g flour</li>
  <li>10 g salt</li>
  <li>350 ml warm water</li>
</ul>

<h2>Method</h2>
<ol>
  <li>Mix everything in a bowl.</li>
  <li>Leave it covered for 12 hours.</li>
  <li>Shape and bake at 230 degrees for 40 minutes.</li>
</ol>

Pourquoi ne pas taper soi-même les numéros ou les tirets ? Parce qu'alors le navigateur ne sait pas qu'il y a une liste. Un lecteur d'écran annonce une vraie liste avec sa longueur, par exemple liste, 3 éléments, si bien que l'auditeur sait ce qui l'attend et peut la sauter. Quand tu insères une étape dans un <ol>, tous les numéros suivants se mettent à jour tout seuls ; avec des numéros tapés, il faudrait renuméroter à la main.

Options des listes ordonnées

<ol> a quelques attributs. start="4" commence le compte à 4, pratique quand une liste reprend après un paragraphe. reversed compte à rebours, pour un top dix. type remplace le marqueur par des lettres ou des chiffres romains : type="a", type="A", type="i" ou type="I". Un seul élément peut aussi sauter à un numéro avec value, comme dans <li value="10">. L'aspect des puces et des numéros (leur forme, leur couleur, ou même leur présence) est contrôlé par CSS.

Des listes dans des listes

Un élément de liste peut contenir une liste entière. Place le <ul> ou le <ol> intérieur dans le <li> auquel il appartient, après le texte de cet élément et avant sa balise fermante. Une erreur fréquente consiste à placer la liste intérieure entre deux éléments <li>, directement dans la liste extérieure, ce qui n'est pas permis. C'est avec des listes imbriquées que les sites construisent des menus avec sous-menus et que les plans affichent des sous-points.

<ul>
  <li>Bread
    <ul>
      <li>Sourdough</li>
      <li>Rye</li>
    </ul>
  </li>
  <li>Cakes</li>
</ul>

Les listes de descriptions

Le troisième type de liste associe des termes à des descriptions, comme un glossaire ou une série de questions et réponses. <dl> est la liste de descriptions, <dt> contient un terme, et <dd> contient sa description. Un terme peut avoir plusieurs descriptions, et plusieurs termes peuvent en partager une. Par défaut, les navigateurs mettent les descriptions en retrait.

Les listes apparaissent là où on ne les attend pas forcément. Le menu en haut de la plupart des sites est un <ul> de liens dans un <nav> ; CSS dispose les éléments en ligne et cache les puces. Une rangée de fiches produits ou une série de résultats de recherche est souvent une liste aussi. Quand tu vois un groupe de choses semblables, demande-toi si c'est une liste ; la réponse est en général oui.

Un moyen rapide de choisir entre les deux : imagine que tu mélanges les éléments. Si le mélange change le sens, comme pour les étapes d'une recette ou un top dix, la liste est ordonnée et demande <ol>. Si rien ne change, comme pour une liste d'affaires à emporter, utilise <ul>. Garde chaque élément court et commence-les tous de la même façon grammaticale, pour que la liste se parcoure facilement.