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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
---
title: <ul>
slug: Web/HTML/Element/ul
tags:
- Element
- HTML
- Reference
- Web
translation_of: Web/HTML/Element/ul
---
<div>{{HTMLRef}}</div>
<p>L'élément HTML <strong><code><ul></code></strong> représente une liste d'éléments sans ordre particulier. Il est souvent représenté par une liste à puces.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}</div>
<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
<h2 id="Attributs">Attributs</h2>
<p>À l'instar des différents éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
<dl>
<dt>{{htmlattrdef("compact")}}{{Deprecated_inline}}</dt>
<dd>Cet attribut booléen fournit une indication pour afficher la liste en mode compact. L'interprétation de cet attribut est laissée à la discrétion de l'agent utilisateur et ne fonctionne pas pour tous les navigateurs.
<div class="warning"><strong>Attention !</strong>Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété {{cssxref("line-height")}} avec la valeur <code>80%</code> pour l'élément <code><ul></code>.</div>
</dd>
</dl>
<dl>
<dt>{{htmlattrdef("type")}}{{Deprecated_inline}}</dt>
<dd>Cet attribut permet de définir le style de puce utilisé pour la liste. Les valeurs définies au sein des spécifications pour HTML3.2 et HTML 4.0/4.01 sont :
<ul>
<li><code>circle</code>,</li>
<li><code>disc</code>,</li>
<li>and <code>square</code>.</li>
</ul>
<p>Un quatrième type a été défini dans l'interface WebTV : <code>triangle</code> mais tous les navigateurs ne l'implémentent pas.</p>
<div class="warning"><strong>Attention !</strong>Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété CSS {{cssxref("list-style-type")}} à la place.</div>
</dd>
</dl>
<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
<ul>
<li>L'élément <code><ul></code> doit être utilisé pour regrouper plusieurs éléments qui n'ont pas de relation d'ordre. Si on hésite entre {{HTMLElement("ol")}} et {{HTMLElement("ul")}}, on se demandera si changer l'ordre des éléments de la liste a un impact : si le déplacement d'un élément change la signification, cela signifie que l'ordre est important et qu'il faudra utiliser {{HTMLElement("ol")}}, sinon l'ordre n'importe pas et {{HTMLElement("ul")}} peut être utilisé.</li>
<li>La propriété CSS {{cssxref("list-style-type")}} est utile pour choisir le type de puce utilisé.</li>
<li>Il n'y a pas de limite pour l'imbrication des listes avec les éléments {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</li>
</ul>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_simple">Exemple simple</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><ul>
<li>1 artichaut</li>
<li>De l'essuie-tout</li>
<li>200g de chocolat</li>
</ul>
</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Exemple_simple","100%","150")}}</p>
<h3 id="Liste_imbriquée">Liste imbriquée</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><ul>
<li>1 artichaut</li>
<li>Les trucs pour le gateau
<!-- On voit que </li> n'est pas là -->
<ul>
<li>3 oeufs</li>
<li>La génoise
<!-- Là on ouvre une autre liste -->
<ul>
<li>100g de sucre</li>
<li>1 oeuf</li>
<li>150g de farine</li>
</ul>
</li> <!-- On ferme la liste la plus imbriquée -->
<li>200g de chocolat</li>
</ul>
<!-- On ferme la liste imbriquée avec </li> -->
</li>
<li>De l'essuie-tout</li>
</ul></pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample("Liste_imbriquée","100%","230")}}</p>
<h3 id="<ul>_et_<ol>_imbriqués"><code><ul></code> et <code><ol></code> imbriqués</h3>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html"><ul>
<li>Lire un livre</li>
<li>Préparer une soupe
<ol>
<li>Couper les légumes</li>
<li>Mettre dans l'eau et cuire</li>
<li>Mouliner</li>
</ol>
</li>
<li>Relever le courrier</li>
</ul>
</pre>
<h4 id="Résultat_3">Résultat</h4>
<p>{{EmbedLiveSample("<ul>_et_<ol>_imbriqués","100%","180")}}</p>
<h2 id="Résumé_technique">Résumé technique</h2>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
<td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, et du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a> si les enfants de l'élément <code><ul></code> incluent au moins un élément {{HTMLElement("li")}}. <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">Contenu tangible.</a></td>
</tr>
<tr>
<th scope="row">Contenu autorisé</th>
<td>Zéro ou plusieurs éléments {{HTMLElement("li")}} qui peuvent éventuellement contenir à leur tour des éléments {{HTMLElement("ol")}} ou {{HTMLElement("ul")}} (listes imbriquées).</td>
</tr>
<tr>
<th scope="row">Omission de balises</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Parents autorisés</th>
<td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>{{domxref("HTMLUListElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-ul-element', '<ul>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '<ul>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("html.elements.ul")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>Les autres éléments HTML relatifs aux listes : {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} (et l'élément obsolète {{HTMLElement("dir")}}).</li>
<li>Les propriétés CSS particulièrement utiles pour mettre en forme l'élément <code><ul></code> :
<ul>
<li>La propriété {{cssxref("list-style")}} qui permet de choisir la façon dont l'indicateur ordinal est affiché,</li>
<li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a>, qui permettent de gérer des listes imbriquées complexes,</li>
<li>La propriété {{cssxref("line-height")}} qui permet de simuler l'attribut {{htmlattrxref("compact", "ul")}} désormais déprécié,</li>
<li>La propriété {{cssxref("margin")}} peut être utilisée pour contrôler l'indentation de la liste.</li>
</ul>
</li>
</ul>
|
