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: <li>
slug: Web/HTML/Element/li
tags:
- Element
- HTML
- HTML Gruppierender Inhalt
- Referenz
- Web
translation_of: Web/HTML/Element/li
---
<div>{{HTMLRef}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Das HTML Element <em>list item</em> <code><li> </code>wird verwendet, um einen Listeneintrag innerhalb einer geordneten Liste ({{HTMLElement("ol")}}) oder einer ungeordneten Liste ({{HTMLElement("ul")}}) oder einem Menü ({{HTMLElement("menu")}}) auszuzeichnen. In Menüs und ungeordneten Listen werden Listeneinträge normalerweise mit Aufzählungszeichen dargestellt. In geordneten Listen werden sie normalerweise mit einem aufsteigendem Zähler wie einer Nummer oder einem Buchstaben auf der linken Seite dargestellt.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien">Inhaltskategorien</a></th>
<td>Keine</td>
</tr>
<tr>
<th scope="row">Erlaubter Inhalt</th>
<td><a href="/de/docs/Web/Guide/HTML/Inhaltskategorien#Fließender+Inhalt">Fließender Inhalt</a></td>
</tr>
<tr>
<th scope="row">Tagauslassung</th>
<td>Der Endtag kann weggelassen werden, falls ihm direkt ein weiteres {{HTMLElement("li")}} Element folgt oder falls sein Elternelement keine weiteren Inhalte hat.</td>
</tr>
<tr>
<th scope="row">Erlaubte Elternelemente</th>
<td>Ein {{HTMLElement("ul")}}, {{HTMLElement("ol")}} oder {{HTMLElement("menu")}} Element. Obwohl es nicht spezifikationsgerechter Verwendung entspricht, kann das veraltete {{HTMLElement("dir")}} ebenfalls als Elternelement verwendet werden.</td>
</tr>
<tr>
<th scope="row">DOM Schnittstelle</th>
<td>{{domxref("HTMLLIElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attribute">Attribute</h2>
<p>Dieses Element enthält die <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">globalen Attribute</a>.</p>
<dl>
<dt>{{htmlattrdef("value")}} </dt>
<dd>Legt die Zahl fest, mit der die Nummerierung in einem {{HTMLElement("ol")}} Element beginnen soll. Dies geschieht unabhängig vom Typ der Nummerierung. Römische Zahlen und Buchstaben können allerdings nicht als Wert angegeben werden, der einzig akzeptierte Wert ist eine Zahl. Listeneinträge, die dem Eintrag mit dem <code>value</code> Attribut folgen, werden die Nummerierung fortführen, die festgelegt wurde. Das <code>value</code> Attribut hat für eine ungeordnete Liste keine Bedeutung.</dd>
<dd>{{Note("Dieses Attribut wurde in HTML4 missbilligt, jedoch in HTML5 neu eingeführt.")}}
<div class="note">
<p><strong>Hinweis:</strong> Vor {{Gecko("9.0")}} wurden negative Werte fälschlicherweise zu 0 konvertiert. Seit {{Gecko("9.0")}} werden alle Ganzzahlwerte korrekt interpretiert.</p>
</div>
</dd>
</dl>
<dl>
<dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
<dd>Dieses Zeichen legt den Aufzählungstyp fest:</dd>
<dd>
<ul>
<li><code>a</code>: Kleinbuchstaben</li>
<li><code>A</code>: Großbuchstaben</li>
<li><code>i</code>: kleingeschriebene, römische Nummerierung</li>
<li><code>I</code>: großgeschriebene römische Nummerierung</li>
<li><code>1</code>: Zahlen</li>
</ul>
Die Festlegung eines Typs in einem {{HTMLElement("ol")}} Element wird für das ganze Element verwendet, wenn nicht innerhalb eines <code><li></code> Elements etwas anderes angegeben wird.</dd>
</dl>
<div class="note"><strong>Hinweis:</strong> Dieses Attribut ist veraltet. Es sollte stattdessen die CSS {{cssxref("list-style-type")}} Eigenschaft verwendet werden.</div>
<h2 id="Beispiele">Beispiele</h2>
<div id="Beispiel_1">
<pre class="brush: html"><ol>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ol>
</pre>
</div>
<p>Ergibt:</p>
<p>{{EmbedLiveSample("Beispiel_1")}}</p>
<div id="Beispiel_2">
<pre class="brush: html" id="Beispiel_2"><ul>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ul>
</pre>
</div>
<p>Ergibt:</p>
<p>{{EmbedLiveSample("Beispiel_2")}}</p>
<p>Für detailliertere Beispiele siehe die Seiten für {{HTMLElement("ol")}} und {{HTMLElement("ul")}}.</p>
<h2 id="Spezifikation">Spezifikation</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</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', 'the-li-element.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> </td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Merkmal</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Grundlegende Unterstützung</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>Merkmal</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Grundlegende Unterstützung</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>Andere Listenbezogene HTML-Elemente: {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} und das veraltete {{HTMLElement("dir")}};</li>
<li>CS- Eigenschaften, die besonders nützlich zur Gestaltung des <code><li></code> Elements sind:
<ul>
<li>die {{cssxref("list-style")}}-Eigenschaft, um festzulegen, wie die Nummerierung dargestellt wird</li>
<li><a href="https://developer.mozilla.org/Web/Guide/CSS/Counters">CSS Counters</a>, um komplexe verschachtelte Listen zu erstellen</li>
<li>die {{cssxref("margin")}} Eigenschaft, um den Einzug der Listeneinträge zu steuern</li>
</ul>
</li>
</ul>
|