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
|
<header><h1><li>: The List Item element</h1></header><div class="section-content"><p>The <code><li></code> <a href="../index">HTML</a> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<a href="ol"><code><ol></code></a>), an unordered list (<a href="ul"><code><ul></code></a>), or a menu (<a href="menu"><code><menu></code></a>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.</p></div>
<h2 id="try_it">Try it</h2>
<div class="section-content"><iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/li.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="value"><a href="#value"><code>value</code></a></dt> <dd> <p>This integer attribute indicates the current ordinal value of the list item as defined by the <a href="ol"><code><ol></code></a> element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The <strong>value</strong> attribute has no meaning for unordered lists (<a href="ul"><code><ul></code></a>) or for menus (<a href="menu"><code><menu></code></a>).</p> </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 character attribute indicates the numbering type:</p> <ul> <li>
<code>a</code>: lowercase letters</li> <li>
<code>A</code>: uppercase letters</li> <li>
<code>i</code>: lowercase Roman numerals</li> <li>
<code>I</code>: uppercase Roman numerals</li> <li>
<code>1</code>: numbers</li> </ul> <p>This type overrides the one used by its parent <a href="ol"><code><ol></code></a> element, if any.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> This attribute has been deprecated; use the CSS <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="examples">Examples</h2>
<div class="section-content"><p>For more detailed examples, see the <a href="ol"><code><ol></code></a> and <a href="ul"><code><ul></code></a> pages.</p></div>
<h3 id="ordered_list">Ordered list</h3>
<div class="section-content">
<div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="d0aCtyTysW90QKmJ9Zpbsy1/9oiB+KCpFVk+NE2nBRk=" data-language="html"><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>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>ol</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result">Result</h4>
<div class="code-example" id="sect2">
<iframe class="sample-code-frame" title="Ordered list sample" id="frame_ordered_list" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/li/runner.html?id=ordered_list" loading="lazy"></iframe>
</div>
</div>
<h3 id="ordered_list_with_a_custom_value">Ordered list with a custom value</h3>
<div class="section-content">
<div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="CS/ra7gVs/R/4xtSHYAsPjcKq4VKzpGaKpFX/ctvCuk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>I<span class="token punctuation">"</span></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 attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></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>li</span><span class="token punctuation">></span></span>fourth 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>fifth 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>ol</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_2">Result</h4>
<div class="code-example" id="sect3">
<iframe class="sample-code-frame" title="Ordered list with a custom value sample" id="frame_ordered_list_with_a_custom_value" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/li/runner.html?id=ordered_list_with_a_custom_value" loading="lazy"></iframe>
</div>
</div>
<h3 id="unordered_list">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="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_3">Result</h4>
<div class="code-example" id="sect4">
<iframe class="sample-code-frame" title="Unordered list sample" id="frame_unordered_list" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/li/runner.html?id=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>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>
<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The end tag can be omitted if the list item is immediately followed by another <a href="li" aria-current="page"><code><li></code></a> element, or if there is no more content in its parent element. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> An <a href="ul"><code><ul></code></a>, <a href="ol"><code><ol></code></a>, or <a href="menu"><code><menu></code></a> element. Though not a conforming usage, the obsolete <a href="dir"><code><dir></code></a> can also be a parent. </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/listitem_role">listitem</a></code> when child of an <code><a href="ol">ol</a></code>, <code><a href="ul">ul</a></code> or <code><a href="menu">menu</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/menuitem_role"><code>menuitem</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role"><code>menuitemcheckbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role"><code>menuitemradio</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role"><code>option</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/radio_role"><code>radio</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role"><code>separator</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role"><code>tab</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treeitem_role"><code>treeitem</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElement"><code>HTMLLIElement</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-li-element">HTML Standard <br><small># the-li-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>li</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">5.5</td>
<td class="bc-supports-yes">≤12.1</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">≤12.1</td>
<td class="bc-supports-yes">1</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">≤6</td>
<td class="bc-supports-yes">≤12.1</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">≤12.1</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>value</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">≤6</td>
<td class="bc-supports-yes">≤12.1</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">≤12.1</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="ul"><code><ul></code></a>, <a href="ol"><code><ol></code></a>, <a href="menu"><code><menu></code></a>, and the obsolete <a href="dir"><code><dir></code></a>;</li> <li>CSS properties that may be specially useful to style the <code><li></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 is displayed,</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/margin"><code>margin</code></a> property, to control the indent of the list item.</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/li" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li</a>
</p>
</div>
|
