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
194
195
196
197
198
199
200
201
202
203
204
205
206
|
---
title: <li>
slug: Web/HTML/Element/li
translation_of: Web/HTML/Element/li
original_slug: HTML/Element/li
---
<p>{{HTMLRef}}</p>
<p>The <strong>HTML <code><li></code> elementi</strong>, liste nesnesİ için kullanılır. Bir alt element içermelidir: bir sıralı liste ({{HTMLElement("ol")}}), bir sırasız liste ({{HTMLElement("ul")}}) veya bir menü ({{HTMLElement("menu")}}). Menülerde ve sırasız listelerde, listenen ögeler bir 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>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
<td>None.</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>The <span title="syntax-end-tag">end tag</span> can be omitted if the list item is immediately followed by another {{HTMLElement("li")}} element, or if there is no more content in its parent element.</td>
</tr>
<tr>
<th scope="row">Permitted parent elements</th>
<td>An {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, or {{HTMLElement("menu")}} element. Though not a conforming usage, the obsolete {{HTMLElement("dir")}} can also be a parent.</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLLIElement")}}</td>
</tr>
<tr>
<th scope="row">Element type</th>
<td>Block</td>
</tr>
</tbody>
</table>
<h2 id="Attributes">Attributes</h2>
<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
<dl>
<dt>{{htmlattrdef("value")}}</dt>
<dd>This integer attribute indicates the current ordinal value of the list item as defined by the {{HTMLElement("ol")}} 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 ({{HTMLElement("ul")}}) or for menus ({{HTMLElement("menu")}}).
<div class="note"><strong>Note</strong>: This attribute was deprecated in HTML4, but reintroduced in HTML5.</div>
<div class="note">
<p><strong>Note:</strong> Prior to {{Gecko("9.0")}}, negative values were incorrectly converted to 0. Starting in {{Gecko("9.0")}} all integer values are correctly parsed.</p>
</div>
</dd>
<dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
<dd>This character attribute indicates the numbering type:
<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>
This type overrides the one used by its parent {{HTMLElement("ol")}} element, if any.
<div class="note"><strong>Usage note:</strong> This attribute has been deprecated: use the CSS {{cssxref("list-style-type")}} property instead.</div>
</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: html"><ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
</pre>
<p>The above HTML will output:</p>
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
<pre class="brush: html"><ol type="I">
<li value="3">third item</li>
<li>fourth item</li>
<li>fifth item</li>
</ol>
</pre>
<p>The above HTML will output:</p>
<ol start="3" style="list-style-type: upper-roman;">
<li>third item</li>
<li>fourth item</li>
<li>fifth item</li>
</ol>
<pre class="brush: html"><ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul></pre>
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
<p>For more detailed examples, see the <a href="/en-US/docs/Web/HTML/Element/ol#Examples"><ol></a> and <a href="/en-US/docs/Web/HTML/Element/ul#Examples"><ul></a> pages.</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '<li>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '<li>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '<li>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>The <code>type</code> attribute has been deprecated.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>Other list-related HTML Elements: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}, and the obsolete {{HTMLElement("dir")}};</li>
<li>CSS properties that may be specially useful to style the <code><li></code> element:
<ul>
<li>the {{cssxref("list-style")}} property, to choose the way the ordinal is displayed,</li>
<li><a href="/Web/Guide/CSS/Counters">CSS counters</a>, to handle complex nested lists,</li>
<li>the {{cssxref("margin")}} property, to control the indent of the list item.</li>
</ul>
</li>
</ul>
<div> </div>
|
