Créer une liste d'éléments avec HTML

Les listes non-ordonnées et les listes ordonnées

Les listes non-ordonnées

Comme leur nom l'indique, les listes non-ordonnées n'ont pas de notion d'ordre et on peut mélanger leurs éléments sans que cela modifie leur sens. Une liste de courses est un bon exemple de liste non-ordonnée (l'ordre dans lequel on achète les produits n'a pas grande importance) :

(Photo par Joseph SARDIN)

Les listes non-ordonnées apparaissent parfois à des endroits inattendus : les barres de navigation sont par exemple des listes non-ordonnées auxquelles on a appliqué quelques règles CSS pour la mise en forme.

Les listes ordonnées

Dans ce cas, les éléments de la liste doivent être lus ou réalisés dans un ordre donné, les éléments sont donc numérotés. On retrouve souvent ces listes pour décrire des processus pas-à-pas (comme un mode d'emploi ou une recette) où chaque étape ne peut être réalisée que si l'action précédente a été traitée :

Construire des listes avec HTML

Comment donc construire une liste avec HTML ? Pour commencer, il faudra répondre à une question : si on mélange les éléments de la liste, est-ce que le sens de la liste change également ?

• Si oui, alors il faudra utiliser un élément <ol> pour créer une liste ordonnée.
• Sinon, il faudra utiliser un élément <ul> qui permettra de créer une liste non-ordonnée.

Ajouter des éléments à une liste

Toute la liste sera placée dans les balises <ol> ou <ul>. Chacun des éléments de la liste sera placé à l'intérieur d'un élément <li>. Voici un exemple qui contient les deux types de liste :

<h1>Guacamole rapide à faire</h1>

<h2>Ingrédients</h2>
<ul>
  <li>2 avocats (pelés et avec les noyaux retirés)</li>
  <li>le jus d'un citron</li>
  <li>¼ de concombre, coupé grossièrement</li>
  <li>1 petite tomate, coupée</li>
</ul>

<h2>Instructions</h2>
<ol>
  <li>Écrasez délicatement les avocats avec une fourchette</li>
  <li>Placez la purée obtenue dans un plat et arrosez avec le jus de citron</li>
  <li>Mélangez pour que le jus de citron empêche la purée d'avocat de noircir</li>
  <li>Mélangez la tomate et le concombre coupés</li>
  <li>Gardez au frais et servir rapidement avec des tortillas</li>
</ol>

Par défaut, le navigateur utilisera des chiffres pour les listes ordonnées et des puces (rondes) pour les listes non-ordonnées :

Comment modifier la numérotation ou les puces

Avec HTML

• Pour commencer une liste avec un autre nombre que 1, on pourra utiliser l'attribut start de l'élément <ol> : <ol start="3">.
• Pour décompter plutôt que compter (par exemple 5-4-3-2-1), on pourra utiliser l'attribut reversed de l'élément <ol> : <ol reversed>.
• Pour utiliser des lettres à la place des chiffres, on pourra utiliser l'attribut type de l'élément <ol> : <ol type="a"> (type="1" affichera des nombres, ="a" pour utiliser des lettres minuscules, ="A" pour utiliser des lettres majuscules, ="i" pour utiliser les chiffres romains en minuscules, ="I" pour utiliser les chiffres romains en majuscules).
• Pour changer la numérotation d'un élément donné, on pourra utiliser l'attribut value de la balise <li> : <li value="5"> (les éléments suivants de la liste seront également renumérotés).

Par exemple, ici, on aura une liste qui utilise des lettres majuscules et qui commence à partir de C :

<ol start="3" type="A">
  <li>Je suis premier</li>
  <li>Je suis deuxième</li>
  <li>Je suis troisième</li>
</ol>

Ce qui donne :

Avec CSS

Les attributs HTML permettent de modifier le contenu d'une liste. Pour ajuster l'aspect cosmétique d'une liste, il faudra utiliser CSS.

• Pour modifier le style de puce ou le style de numérotation, on pourra utiliser la propriété CSS list-style-type
• Pour utiliser une image donnée comme puce, on pourra utiliser la propriété CSS list-style-image. Attention toutefois, les images sont plus lourdes (donc plus lentes) et moins adaptatives que le texte.

CSS peut permettre d'obtenir des effets très complexes (comme un système de comptage personnalisé). Si vous souhaitez apprendre CSS, vous pouvez parcourir le Guide CSS et voir comment appliquer des règles CSS à une page web.

Prenons un rapide exemple. Voici une liste HTML non-ordonnée :

<ul>
  <li>J'ai un point</li>
  <li>J'ai un cercle</li>
  <li>J'ai aussi un cercle</li>
</ul>

Ces règles CSS permettront que la puce des éléments soit un cercle, sauf pour le premier (où ce sera un point) :

ul {
  list-style-type: circle;
}

li:first-child {
  list-style-type: disc;
}

Ce code donnera :

Les listes imbriquées

On voit souvent plusieurs listes placées les unes dans les autres. Autrement dit, on peut imbriquer des listes (un élément d'une liste sera une liste entière) :

<ul>
	<li>Un composant</li>
	<li>Un processus :
		<ol>
			<li>Étape 1</li>
			<li>Étape 2</li>
			<li>Étape 3</li>
		</ol>
	</li>
	<li>Un composant</li>
</ul>

Cela donnera le résultat suivant :

Les menus de navigation utilisent parfois des listes imbriquées. Pour étudier un exemple réel, vous pouvez inspecter le code HTML du menu MDN qui se situe en haut de cette page.

En savoir plus

• <ul>
• <ol>
• <li>
• Des recommandations sur comment utiliser les listes