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
|
---
title: <ul>
slug: Web/HTML/Element/ul
tags:
- Element
- HTML
- HTML grouping content
- Reference
translation_of: Web/HTML/Element/ul
---
<p>L'<strong>element HTML</strong> (<em>llista desordenada</em>) <strong><code><ul></code></strong> representa una llista desordenada d'elements, és a dir, un recull d'elements que no tenen un ordre numèric, i el seu ordre a la llista no té sentit. En general, els elements d'una llista desordenada es mostren amb una vinyeta, que pot ser de diverses formes, com un punt, un cercle o un quadrat. L'estil de la vinyeta no està definit en la descripció HTML de la pàgina, sinó en la seva CSS associada, mitjançant la propietat {{ cssxref("list-style-type") }}.</p>
<p>No hi ha limitació en la profunditat i l'alternança de les llistes niades definides amb els elements {{ HTMLElement("ol") }} i {{ HTMLElement("ul") }}.</p>
<div class="note"><strong>Nota d'ùs: </strong> Els elements {{ HTMLElement("ol") }} i {{ HTMLElement("ul") }} ambdós representen una llista d'elements. Es diferencien en que, amb l'element {{HTMLElement ("ol")}}, l'ordre és significatiu. Com a regla general per determinar quin d'ells utilitzar, tracteu de canviar l'ordre dels elements de la llista; si canvia el significat teniu que utilitzar l'element {{ HTMLElement("ol") }}, en cas contrari podeu usar {{ HTMLElement("ul") }}.</div>
<h2 id="Context_d'ùs">Context d'ùs</h2>
<table class="properties">
<tbody>
<tr>
<td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Categories de contingut</a></td>
<td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#Flow content">Contingut dinàmic</a></td>
</tr>
<tr>
<td>Contingut permès</td>
<td>zero o més elements {{ HTMLElement("li") }}, <span id="result_box" lang="ca"><span>que al seu torn</span> <span>contenen sovint</span> <span>niats</span></span> elements {{ HTMLElement("ol") }} o {{ HTMLElement("ul") }}.</td>
</tr>
<tr>
<td>Omissió de l'etiqueta</td>
<td>cap, tant l'etiqueta inicial com l'etiqueta final són obligatories</td>
</tr>
<tr>
<td>Elements pares permesos</td>
<td>Qualsevol element que accepti contingut dinàmic</td>
</tr>
<tr>
<td>Interfície DOM</td>
<td>{{domxref("HTMLUListElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atributs">Atributs</h2>
<dl>
</dl>
<p>Aquest element inclou els<span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributs globals</a><span style="line-height: 21px;">.</span></p>
<dl>
<dt>{{ htmlattrdef("compact") }}{{ Deprecated_inline() }}</dt>
<dd>Aquest atribut booleà dona entendre que la llista hauria de representar-se en un estil compacte. La interpretació d'aquest atribut depèn de l'agent d'usuari i no funciona en tots els navegadors.
<div class="note"><strong>Nota d'ùs: </strong>No utilitzeu aquest atribut, ja que ha quedat en desús: l'element {{ HTMLElement("ul") }} s'ha de donar estil amb <a href="https://developer.mozilla.org/en/CSS" title="en/CSS">CSS</a> . Per donar un efecte similar com l'atribut <code>compact</code>, la propietat <a href="https://developer.mozilla.org/en/CSS" title="en/CSS">CSS</a> <a href="https://developer.mozilla.org/en/CSS/line-height" title="en/CSS/line-height">line-height</a> es pot utilitzar amb un valor del 80%.</div>
</dd>
</dl>
<dl>
<dt>{{ htmlattrdef("type") }}{{ Deprecated_inline() }}</dt>
<dd>S'utilitza per definir l'estil de vinyeta de la llista. Els valors definits en <a href="/en/HTML3.2" title="en/HTML3.2">HTML3.2</a> i la versió de transició d'<a href="/en/HTML4.01" title="en/HTML4.01">HTML 4.0/4.01</a> són<span style="font-family: monospace;">:</span>
<ul>
<li><code>circle</code>,</li>
<li><code>disc</code>,</li>
<li>and <code>square</code>.</li>
</ul>
<p>Un quart tipus de vinyeta s'ha definit en la interfície WebTV, però no tots els navegadors el suporten: <code>triangle.</code></p>
<p>Si no està present i no s'aplica la propietat CSS {{ cssxref("list-style-type") }} a l'element, l'agent d'usuari pot decidir utilitzar un tipus de vinyetes depenent del nivell d'anidament de la llista.</p>
<div class="note"><strong>Nota d'ùs:</strong> No utilitzeu aquest atribut, ja que ha quedat desaprovat; utilitzeu la propietat CSS {{ cssxref("list-style-type") }} en el seu lloc.</div>
</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_senzill">Exemple senzill</h3>
<pre class="brush: html"><ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</pre>
<p>Sortida de l'anterior HTML:</p>
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
<h3 id="Llistes_niades">Llistes niades</h3>
<pre class="brush: html"><ul>
<li>first item</li>
<li>second item <!-- Look, the closing </li> tag is not placed here! -->
<ul>
<li>second item first subitem</li>
<li>second item second subitem <!-- Same for the second nested unordered list! -->
<ul>
<li>second item second subitem first sub-subitem</li>
<li>second item second subitem second sub-subitem</li>
<li>second item second subitem third sub-subitem</li>
</ul>
</li> <!-- Closing </li> tag for the li that contains the third unordered list -->
<li>second item third subitem</li>
</ul>
</li> <!-- Here is the closing </li> tag -->
<li>third item</li>
</ul></pre>
<p>Sortida de l'anterior HTML:</p>
<ul>
<li>first item</li>
<li>second item
<ul>
<li>second item first subitem</li>
<li>second item second subitem
<ul style="">
<li>second item second subitem first sub-subitem</li>
<li>second item second subitem second sub-subitem</li>
<li>second item second subitem third sub-subitem</li>
</ul>
</li>
<li>second item third subitem</li>
</ul>
</li>
<li>third item</li>
</ul>
<h3 id="Niar_<ul>_i_<ol>">Niar <ul> i <ol></h3>
<pre class="brush: html"><ul>
<li>first item</li>
<li>second item <!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li> <!-- Here is the closing </li> tag -->
<li>third item</li>
</ul>
</pre>
<p>Sortida de l'anterior HTML:</p>
<ul>
<li>first item</li>
<li>second item
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li>
<li>third item</li>
</ul>
<h2 id="Veure">Veure</h2>
<ul>
<li>Altres elements HTML relacionats amb llistes: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} i el obsolet {{ HTMLElement("dir") }};</li>
<li><span id="result_box" lang="ca"><span>Propietats CSS</span> <span>que poden ser</span> <span>especialment</span> <span>útils</span> <span>per a l'estil</span> <span>de l'element</span> <span><</span><span>ul</span><span>></span><span>:</span></span>
<ul>
<li>la propietat <a href="/en/CSS/list-style" title="en/CSS/list-style">list-style</a>, útil per triar la forma en què es mostra l'ordinal,</li>
<li><a href="/en/CSS_Counters" title="en/CSS_Counters">CSS counters</a>, <span id="result_box" lang="ca"><span>útil per</span> <span>gestionar</span> <span>llistes</span> <span>niades</span> <span>complexes,</span></span></li>
<li>la propietat <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a>, <span id="result_box" lang="ca"><span>útil</span> <span>per simular</span> l'atribut obsolet </span>{{ htmlattrxref("compact", "ul") }},</li>
<li>la propietat <a href="/en/CSS/margin" title="en/CSS/margin">margin</a>, <span id="result_box" lang="ca"><span>útil</span> <span>per controlar</span> la </span> sagnia <span lang="ca"><span> de la</span> <span>llista</span></span>.</li>
</ul>
</li>
</ul>
<p>{{ languages({ "en":"en/HTML/Element/ul", "de":"de/HTML/Element/ul", "ja":"ja/HTML/Element/ul", "pl":"pl/HTML/Element/ul"}) }}</p>
<p>{{ HTMLRef }}</p>
|
