1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
---
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
---
<div class="summary">
<p>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.</p>
</div>
<table class="learn-box nostripe standard-table">
<tbody>
<tr>
<th scope="row">Prérequis :</th>
<td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td>
</tr>
<tr>
<th scope="row">Objectifs :</th>
<td>Apprendre à mettre en place des listes (ordonnées et non-ordonnées) avec HTML.</td>
</tr>
</tbody>
</table>
<h2 id="Les_listes_non-ordonnées_et_les_listes_ordonnées">Les listes non-ordonnées et les listes ordonnées</h2>
<dl>
<dt>Les listes non-ordonnées</dt>
<dd>
<p>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) :</p>
<p><img alt="Croustille, moutarde" src="https://mdn.mozillademos.org/files/11639/3409407112_4348b68ea4_z.jpg" style="height: 281px; width: 423px;" title="Photo par Joseph SARDIN"></p>
<p>(Photo par <a href="https://www.flickr.com/photos/14328577@N08/">Joseph SARDIN</a>)</p>
<p>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.</p>
</dd>
<dt>Les listes ordonnées</dt>
<dd>
<p>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 :</p>
<a href="https://www.flickr.com/photos/chiotsrun/4457386990/sizes/m/"><img alt="" src="https://farm3.staticflickr.com/2785/4457386990_4d30f85964_d.jpg" style="height: 344px; width: 500px;" title="© Chiot's Run"></a></dd>
</dl>
<h2 id="Construire_des_listes_avec_HTML">Construire des listes avec HTML</h2>
<p>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 ?</p>
<ul>
<li>Si oui, alors il faudra utiliser un élément {{HTMLElement('ol')}} pour créer une <strong>liste ordonnée.</strong></li>
<li>Sinon, il faudra utiliser un élément {{HTMLElement('ul')}} qui permettra de créer une <strong>liste non-ordonnée.</strong></li>
</ul>
<h3 id="Ajouter_des_éléments_à_une_liste">Ajouter des éléments à une liste</h3>
<p>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 :</p>
<pre class="brush: html"><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>
</pre>
<p>Par défaut, le navigateur utilisera des chiffres pour les listes ordonnées et des puces (rondes) pour les listes non-ordonnées :</p>
<p>{{EmbedLiveSample('Ajouter_des_éléments_à_une_liste','100%',350)}}</p>
<h3 id="Comment_modifier_la_numérotation_ou_les_puces">Comment modifier la numérotation ou les puces</h3>
<h4 id="Avec_HTML">Avec HTML</h4>
<ul>
<li><strong>Pour commencer une liste avec un autre nombre que 1</strong>, on pourra utiliser l'attribut {{htmlattrxref('start','ol')}} de l'élément {{HTMLElement('ol')}} : <code><ol start="3"></code>.</li>
<li><strong>Pour décompter plutôt que compter </strong>(par exemple 5-4-3-2-1), on pourra utiliser l'attribut {{htmlattrxref('reversed','ol')}} de l'élément {{HTMLElement('ol')}} : <code><ol reversed></code>.</li>
<li><strong>Pour utiliser des lettres à la place des chiffres</strong>, on pourra utiliser l'attribut {{htmlattrxref('type','ol')}} de l'élément {{HTMLElement('ol')}} : <code><ol type="a"></code> (<code>type="1"</code> affichera des nombres, <code>="a"</code> pour utiliser des lettres minuscules, <code>="A"</code> pour utiliser des lettres majuscules, <code>="i"</code> pour utiliser les chiffres romains en minuscules, <code>="I"</code> pour utiliser les chiffres romains en majuscules).</li>
<li><strong>Pour changer la numérotation d'un élément donné</strong>, on pourra utiliser l'attribut {{htmlattrxref('value','li')}} de la balise {{HTMLElement('li')}} : <code><li value="5"></code> (les éléments <em>suivants</em> de la liste seront également renumérotés).</li>
</ul>
<p>Par exemple, ici, on aura une liste qui utilise des lettres majuscules et qui commence à partir de C :</p>
<pre class="brush: html"><ol start="3" type="A">
<li>Je suis premier</li>
<li>Je suis deuxième</li>
<li>Je suis troisième</li>
</ol></pre>
<p>Ce qui donne :</p>
<p>{{EmbedLiveSample('Avec_HTML','100%',90)}}</p>
<h4 id="Avec_CSS">Avec CSS</h4>
<p>Les attributs HTML permettent de modifier le contenu d'une liste. Pour ajuster l'aspect cosmétique d'une liste, il faudra utiliser CSS.</p>
<ul>
<li><strong>Pour modifier le style de puce ou le style de numérotation, </strong>on pourra utiliser la propriété CSS {{cssxref("list-style-type")}}</li>
<li><strong>Pour utiliser une image donnée comme puce,</strong> on pourra utiliser la propriété CSS {{cssxref("list-style-image")}}. Attention toutefois, les images sont plus lourdes (donc plus lentes) et moins adaptatives que le texte.</li>
</ul>
<p>CSS peut permettre d'obtenir des effets très complexes (comme <a href="/fr/docs/Web/CSS/Compteurs_CSS">un système de comptage personnalisé</a>). Si vous souhaitez apprendre CSS, vous pouvez parcourir <a href="/fr/docs/CSS/Premiers_pas">le Guide CSS</a> et voir <a href="/fr/Apprendre/HTML/Comment/Appliquer_du_CSS_à_une_page_web">comment appliquer des règles CSS à une page web</a>.</p>
<p>Prenons un rapide exemple. Voici une liste HTML non-ordonnée :</p>
<pre class="brush: html"><ul>
<li>J'ai un point</li>
<li>J'ai un cercle</li>
<li>J'ai aussi un cercle</li>
</ul></pre>
<p>Ces règles CSS permettront que la puce des éléments soit un cercle, sauf pour le premier (où ce sera un point) :</p>
<pre class="brush: css">ul {
list-style-type: circle;
}
li:first-child {
list-style-type: disc;
}
</pre>
<p>Ce code donnera :</p>
<p>{{EmbedLiveSample('Avec_CSS','100%',90)}}</p>
<h3 id="Les_listes_imbriquées">Les listes imbriquées</h3>
<p>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) :</p>
<pre class="brush: html"><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>
</pre>
<p>Cela donnera le résultat suivant :</p>
<p>{{ EmbedLiveSample('Les_listes_imbriquées','100%',150) }}</p>
<p>Les menus de navigation utilisent parfois des listes imbriquées. Pour étudier un exemple réel, vous pouvez <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML">inspecter le code HTML</a> du menu MDN qui se situe en haut de cette page.</p>
<h2 id="En_savoir_plus">En savoir plus</h2>
<ul>
<li>{{HTMLElement("ul")}}</li>
<li>{{HTMLElement("ol")}}</li>
<li>{{HTMLElement("li")}}</li>
<li><a href="http://www.w3.org/TR/html4/struct/lists.html#h-10.1">Des recommandations sur comment utiliser les listes</a></li>
</ul>
|
