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
|
---
title: ol
slug: Web/HTML/Element/ol
tags:
- HTML
- HTML Elemente
- HTML Referenz
translation_of: Web/HTML/Element/ol
---
<h2 id="Übersicht">Übersicht</h2>
<p>Das HTML Element <em>ordered list</em> <ol> wird verwendet, um eine geordnete Liste zu definieren. Die Aufzählung kann in unterschiedlichen Formen geschehen, darunter Buchstaben, römische Zahlen und reguläre Zahlen. Die einzelnen Einträge innerhalb der Liste werden über <a href="/de/HTML/Element/li" title="de/HTML/Element/li">Listen</a> (<a href="/de/HTML/Element/li" title="de/HTML/Element/li"><li></a>) Elemente in das <code><ol></code> Element eingefügt.</p>
<ul>
<li>Element Typ: <a href="/de/HTML/Block-level_Elemente">block-level</a></li>
<li>Erlaubter Inhalt: <a href="/de/HTML/Element/li" title="de/HTML/Element/li">li</a></li>
</ul>
<h2 id="Attribute">Attribute</h2>
<dl>
<dt>{{htmlattrdef("start")}} {{HTMLVersionInline(5)}}</dt>
<dd>Legt einen Startwert für die Aufzählung der Listeneinträge fest. 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. Um die Aufzählung mit dem Buchstaben "C" zu beginnen, schreibt man einfach: <code><ol type="A" start="3"></code>.</dd>
<dd>
<div class="note">
<p>Das Start-Attribut wurde in HTML4 als deprecated markiert, allerdings in HTML5 wieder integriert.</p>
</div>
</dd>
<dt>{{htmlattrdef("type")}} {{HTMLVersionInline(5)}}</dt>
<dd>
<p>Wird verwendet, um das Aufzählungszeichen der Liste festzulegen. Die Werte sind in der <a href="/de/HTML3.2" title="de/HTML3.2">HTML3.2</a> Spezifikation festgelegt und in der „transitional“ Version von <a href="/de/HTML4.01" title="de/HTML4.01">HTML 4.0/4.01</a> sind <code>circle</code>, <code>disc</code>, und <code>square</code> aufgeführt. Der Browser kann über unterschiedliche Zeichen entscheiden, abhängig vom Grad der Verschachtelung, wenn das type Attribut nicht verwendet wird. Das WebTV Interface unterstützt auch ein <code>triangle</code> Zeichen. Dieses Attribut ist veraltet, es sollte die <a href="/de/CSS" title="de/CSS">CSS</a> <a href="/de/CSS/list-style-type" title="de/CSS/list-style-type">list-style-type</a> Eigenschaft stattdessen verwendet werden.</p>
<div class="note">
<p>Das Type-Attribut wurde in HTML4 als deprecated markiert, allerdings in HTML5 wieder integriert.</p>
</div>
</dd>
<dt>{{htmlattrdef("compact")}} {{ Deprecated_inline() }}</dt>
<dd>Gibt an, dass die Liste in einer kompakten Form gerendert werden soll. Die Interpretation dieses Attributs hängt vom Browser ab.</dd>
<dd>
<div class="note">
<p>Das Compact-Attribut wurde seit HTML4 als deprecated markiert und sollte nicht weiter benutzt werden.</p>
<p>einen ähnlichen Effekt kann man mit der CSS-Eigenschaft {{cssxref("line-height")}} und einem Wert von <code>80%</code> erzielen.</p>
</div>
</dd>
</dl>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3>
<pre> <ol>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ol>
</pre>
<p>Dieses HTML gibt das Folgende aus:</p>
<ol>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ol>
<h3 id="Verwendung_des_start_Attributs">Verwendung des <code>start</code> Attributs</h3>
<pre> <ol start="7">
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ol>
</pre>
<p>Dieses HTML gibt das Folgende aus:</p>
<ol start="7">
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ol>
<h3 id="Verschachtelte_Listen">Verschachtelte Listen</h3>
<pre> <ol>
<li>Erster Eintraf</li>
<li>Zweiter Eintrag <!-- Achtung, das schließende </li> Tag wird hier nicht notiert! -->
<ol>
<li>Zweiter Eintrag erster Untereintrag</li>
<li>Zweiter Eintrag zweiter Untereintrag</li>
<li>Zweiter Eintrag dritter Untereintrag</li>
</ol>
</li> <!-- Hier ist das schließende </li> Tag angegeben! -->
<li>Dritter Eintrag</li>
</ol>
</pre>
<p>Dieses HTML gibt das Folgende aus:</p>
<ol>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag
<ol>
<li>Zweiter Eintrag erster Untereintrag</li>
<li>Zweiter Eintrag zweiter Untereintrag</li>
<li>Zweiter Eintrag dritter Untereintrag</li>
</ol>
</li>
<li>Dritter Eintrag</li>
</ol>
<h3 id="Verschachtelte_<ul>_und_<ol>">Verschachtelte <ul> und <ol></h3>
<pre> <ol>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag <!-- Achtung, das schließende </li> Tag wird hier nicht notiert! -->
<ul>
<li>Zweiter Eintrag erster Untereintrag</li>
<li>Zweiter Eintrag zweiter Untereintrag</li>
<li>Zweiter Eintrag dritter Untereintrag</li>
</ul>
</li> <!-- Hier ist das schließende </li> Tag angegeben! -->
<li>Dritter Eintrag</li>
</ol>
</pre>
<p>Dieses HTML gibt das Folgende aus:</p>
<ol>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag
<ul>
<li>Zweiter Eintrag erster Untereintrag</li>
<li>Zweiter Eintrag zweiter Untereintrag</li>
<li>Zweiter Eintrag dritter Untereintrag</li>
</ul>
</li>
<li>Dritter Eintrag</li>
</ol>
<h2 id="Hinweise">Hinweise</h2>
<p>Es können so viele Listen, wie man möchte verschachtelt werden, <code><ul></code> und <code><ol></code> in jeder Reihenfolge.</p>
<p>Um die Einrückung von Listen zu verändern sollte die <a href="/de/CSS" title="de/CSS">CSS</a> <a href="/de/CSS/margin" title="de/CSS/margin">margin</a> Eigenschaft verwendet werden.</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/HTML/Element/li" title="de/HTML/Element/li">HTML List item Element</a></li>
<li><a href="/de/HTML/Element/ul" title="de/HTML/Element/ul">HTML ungeordnete Liste</a></li>
<li><a href="/de/CSS/list-style" title="de/CSS/list-style">CSS list-style Eigenschaft</a></li>
<li><a href="/de/CSS_Counters" title="de/CSS_Counters">CSS Counters</a></li>
</ul>
<p>{{HTMLRef}}</p>
|
