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
|
<header><h1><ul>: The Unordered List element</h1></header><div class="section-content"><p>The <code><ul></code> <a href="../index">HTML</a> element represents an unordered list of items, typically rendered as a bulleted list.</p></div>
<h2 id="try_it">Try it</h2>
<div class="section-content"><iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/ul.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div>
<h2 id="attributes">Attributes</h2>
<div class="section-content">
<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="compact">
<a href="#compact"><code>compact</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr>
</dt> <dd> <p>This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>, and it doesn't work in all browsers.</p> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> Do not use this attribute, as it has been deprecated: use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> instead. To give a similar effect as the <code>compact</code> attribute, the CSS property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height"><code>line-height</code></a> can be used with a value of <code>80%</code>.</p> </div> </dd> <dt id="type">
<a href="#type"><code>type</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr>
</dt> <dd> <p>This attribute sets the bullet style for the list. The values defined under HTML3.2 and the transitional version of HTML 4.0/4.01 are:</p> <ul> <li><code>circle</code></li> <li><code>disc</code></li> <li><code>square</code></li> </ul> <p>A fourth bullet type has been defined in the WebTV interface, but not all browsers support it: <code>triangle</code>.</p> <p>If not present and if no <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> property applies to the element, the user agent selects a bullet type depending on the nesting level of the list.</p> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong> Do not use this attribute, as it has been deprecated; use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> property instead.</p> </div> </dd> </dl>
</div>
<h2 id="usage_notes">Usage notes</h2>
<div class="section-content"><ul> <li>The <code><ul></code> element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> property.</li> <li>The <code><ul></code> and <a href="ol"><code><ol></code></a> elements may be nested as deeply as desired. Moreover, the nested lists may alternate between <code><ol></code> and <code><ul></code> without restriction.</li> <li>The <a href="ol"><code><ol></code></a> and <code><ul></code> elements both represent a list of items. They differ in that, with the <a href="ol"><code><ol></code></a> element, the order is meaningful. To determine which one to use, try changing the order of the list items; if the meaning is changed, the <a href="ol"><code><ol></code></a> element should be used, otherwise you can use <code><ul></code>.</li> </ul></div>
<h2 id="examples">Examples</h2>
<h3 id="simple_example">Simple example</h3>
<div class="section-content">
<div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="n7kxjao4feyxWliQCMdrMcy8RxCttlQhOI9lg8Od7fc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>first item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>third item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result">Result</h4>
<div class="code-example" id="sect3">
<iframe class="sample-code-frame" title="Simple example sample" id="frame_simple_example" width="400" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ul/runner.html?id=simple_example" loading="lazy"></iframe>
</div>
</div>
<h3 id="nesting_a_list">Nesting a list</h3>
<div class="section-content">
<div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="Ef2xrtueYGdwFrkYsNih7qpMDxieHEhLc8zNyPC6pKU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>first item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
second item
<span class="token comment"><!-- Look, the closing </li> tag is not placed here! --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item first subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
second item second subitem
<span class="token comment"><!-- Same for the second nested unordered list! --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item second subitem first sub-subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item second subitem second sub-subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item second subitem third sub-subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- Closing </li> tag for the li that
contains the third unordered list --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item third subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- Here is the closing </li> tag --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>third item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_2">Result</h4>
<div class="code-example" id="sect4">
<iframe class="sample-code-frame" title="Nesting a list sample" id="frame_nesting_a_list" width="400" height="340" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ul/runner.html?id=nesting_a_list" loading="lazy"></iframe>
</div>
</div>
<h3 id="ordered_list_inside_unordered_list">Ordered list inside unordered list</h3>
<div class="section-content">
<div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="y5o6lzTwRMBraQs976S7Wkpb7WHu4FJ2B/4onFdPcc4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>first item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
second item
<span class="token comment"><!-- Look, the closing </li> tag is not placed here! --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item first subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item second subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item third subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- Here is the closing </li> tag --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>third item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_3">Result</h4>
<div class="code-example" id="sect5">
<iframe class="sample-code-frame" title="Ordered list inside unordered list sample" id="frame_ordered_list_inside_unordered_list" width="400" height="190" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ul/runner.html?id=ordered_list_inside_unordered_list" loading="lazy"></iframe>
</div>
</div>
<h2 id="technical_summary">Technical summary</h2>
<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, and if the <code><ul></code> element's children include at least one <a href="li"><code><li></code></a> element, <a href="../content_categories#palpable_content">palpable content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> Zero or more <a href="li"><code><li></code></a>, <a href="script"><code><script></code></a> and <a href="template"><code><template></code></a> elements. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role">list</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/directory_role"><code>directory</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role"><code>listbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role"><code>menu</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role"><code>menubar</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role"><code>radiogroup</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role"><code>tablist</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role"><code>toolbar</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role"><code>tree</code></a> </td> </tr> <tr> <th scope="row">DOM Interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElement"><code>HTMLUListElement</code></a></td> </tr> </tbody> </table></div></figure></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element">HTML Standard <br><small># the-ul-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>ul</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>compact</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">3</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>type</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li>Other list-related HTML Elements: <a href="ol"><code><ol></code></a>, <a href="li"><code><li></code></a>, <a href="menu"><code><menu></code></a>
</li> <li>CSS properties that may be specially useful to style the <code><ul></code> element: <ul> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style"><code>list-style</code></a> property, to choose the way the ordinal displays.</li> <li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters">CSS counters</a>, to handle complex nested lists.</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height"><code>line-height</code></a> property, to simulate the deprecated <a href="#compact"><code>compact</code></a> attribute.</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> property, to control the list indentation.</li> </ul> </li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul</a>
</p>
</div>
|
