--- title: Créer une liste d'éléments avec HTML slug: conflicting/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals tags: - Beginner - Guide - HTML translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists translation_of_original: Learn/HTML/Howto/Create_list_of_items_with_HTML original_slug: Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML ---

Vous souhaitez ajouter une liste numérotée ou une liste à puces. Quel que soit son type, HTML permet de dresser une liste très rapidement.

Prérequis : Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs : Apprendre à mettre en place des listes (ordonnées et non-ordonnées) 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) :

Croustille, moutarde

(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 ?

Ajouter des éléments à une liste

Toute la liste sera placée dans les balises {{htmlelement("ol")}} ou {{htmlelement("ul")}}. Chacun des éléments de la liste sera placé à l'intérieur d'un élément {{htmlelement("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 :

{{EmbedLiveSample('Ajouter_des_éléments_à_une_liste','100%',350)}}

Comment modifier la numérotation ou les puces

Avec HTML

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 :

{{EmbedLiveSample('Avec_HTML','100%',90)}}

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.

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 :

{{EmbedLiveSample('Avec_CSS','100%',90)}}

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 :

{{ EmbedLiveSample('Les_listes_imbriquées','100%',150) }}

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