HTML <ol> Tag
Das HTML <ol>-Tag erstellt geordnete Listen. Attribute (type, start, reversed) und CSS list-style-type mit Syntax und Beispielen.
Das HTML-Tag <ol> wird verwendet, um eine geordnete Liste zu erstellen, die Elemente in einer bestimmten Reihenfolge enthält.
Jedes Element der geordneten Liste beginnt mit dem öffnenden <li>-Tag und endet mit dem schließenden Tag </li>. Neben Text kann das <li>-Tag weitere HTML-Elemente enthalten (Listen, Bilder, Überschriften, Absätze usw.).
Geordnete Listenelemente haben in der Regel ein vorangestelltes Markierungszeichen, zum Beispiel einen Buchstaben oder eine Zahl.
Das Attribut type legt fest, welches Markierungszeichen verwendet wird. Die möglichen Werte sind:
type="1"— Arabische Zahlen (1, 2, 3, ...). Dies ist der Standardwert.type="A"— Großbuchstaben des lateinischen Alphabets (A, B, C, ...).type="a"— Kleinbuchstaben des lateinischen Alphabets (a, b, c, ...).type="I"— Große römische Ziffern (I, II, III, ...).type="i"— Kleine römische Ziffern (i, ii, iii, ...).
Wird das Attribut type nicht angegeben, werden die Elemente des <ol>-Tags mit arabischen Zahlen beginnend bei eins nummeriert.
Das Attribut type ist präsentationsbezogen — es steuert das Aussehen der Liste, nicht ihre Bedeutung. Der moderne, empfohlene Ansatz ist, das Markierungszeichen in CSS mit der Eigenschaft list-style-type festzulegen und so die Gestaltung aus dem Markup herauszuhalten. Die CSS-Entsprechungen sind: type="1" → decimal, type="A" → upper-alpha, type="a" → lower-alpha, type="I" → upper-roman, type="i" → lower-roman.
Sowohl das <ol>- als auch das <ul>-Tag stellen eine Liste von Elementen dar. Der Unterschied beim <ol>-Tag besteht darin, dass die Reihenfolge bedeutsam ist.
Normalerweise können die Tags <ol> und <ul> beliebig tief verschachtelt werden und dabei beliebig miteinander wechseln.
Werden CSS-Eigenschaften auf das <ol>-Tag angewendet, erben die im <li>-Tag verschachtelten Elemente diese.
Syntax
Das <ol>-Tag wird paarweise verwendet. Der Inhalt wird zwischen das öffnende (<ol>) und das schließende (</ol>) Tag geschrieben.
Beispiel des HTML-Tags <ol>:
Beispiel einer geordneten Liste mit dem HTML-Tag <ol>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Appetizers</li>
<li>Hot</li>
<li>Salads</li>
</ol>
<ol start="50">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol type="A">
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>Im gegebenen Beispiel wurde das Attribut start mit dem Wert „50" verwendet.
Anstatt das Markierungszeichen im Markup mit dem Attribut type festzulegen, sollte es in CSS mit der Eigenschaft list-style-type definiert werden. So bleibt die Darstellung im Stylesheet und die Regel lässt sich für viele Listen wiederverwenden. Im folgenden Beispiel wird das Markierungszeichen in einem <style>-Block statt als inline-Attribut style= gesetzt:
Beispiel des HTML-Tags <ol> mit der CSS-Eigenschaft list-style-type:
Beispiel des HTML-Tags <ol> mit der Eigenschaft list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.roman {
list-style-type: upper-roman;
}
.letters {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>Examples of ordered lists</h2>
<ol class="roman">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol class="letters">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
<ol>
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
</body>
</html>Das Attribut reversed
Das boolean-Attribut reversed nummeriert die Liste in absteigender Reihenfolge. Es eignet sich ideal für „Top-5"-Countdowns oder für Listen, bei denen das letzte Element die niedrigste Zahl tragen soll. Es kann mit start kombiniert werden, um die höchste Zahl zu steuern.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Top three drinks</h2>
<ol reversed>
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>Die Markierungen oben zählen 3, 2, 1 herunter.
Geordnete Listen verschachteln
Ein Listenelement kann eine weitere <ol> enthalten, was das Erstellen von Gliederungen und Teilschritten ermöglicht. Jede verschachtelte Liste beginnt ihre eigene Nummerierung von vorn. Das verschachtelte <ol> muss innerhalb des übergeordneten <li> platziert werden (nicht zwischen Listenelementen), damit die Struktur gültig bleibt.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Drinks
<ol type="a">
<li>Cold drinks</li>
<li>Hot drinks</li>
</ol>
</li>
<li>Desserts
<ol type="a">
<li>Ice-Cream</li>
<li>Cake</li>
</ol>
</li>
</ol>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| compact | compact | Wies darauf hin, dass die Liste kompakter dargestellt werden soll, mit weniger Abstand zwischen den Elementen. Veraltet und in HTML5 nicht mehr unterstützt. Um den Abstand zu verringern, verwenden Sie stattdessen die CSS-Eigenschaften margin und padding für die <li>- (oder <ol>-) Elemente. |
| reversed | reversed | Gibt an, dass die Listenelemente in absteigender Reihenfolge angezeigt werden sollen (statt der üblichen aufsteigenden Reihenfolge). |
| start | number | Legt die Zahl fest, mit der die geordnete Liste beginnt. Der Wert muss eine ganze Zahl sein; negative Werte sind zulässig. Bei Verwendung mit Buchstaben (type="A" und type="a") gibt die Zahl die ordinale Position des Buchstabens im Alphabet an. Zum Beispiel entspricht start="5" dem Buchstaben „E", sodass die Liste damit beginnt. Bei start="27" wird die Liste zweistellig (27 = „AA", 28 = „AB", 29 = „AC", ...). |
| type | 1, A, a, I, i | Legt den Typ des Markierungszeichens fest (Dezimalzahlen, Großbuchstaben, Kleinbuchstaben, große römische Ziffern, kleine römische Ziffern). |
Das <ol>-Tag unterstützt die globalen Attribute und die Ereignisattribute.
Verwandte Tags und Eigenschaften
<ul>— eine ungeordnete (Aufzählungs-)Liste, wenn die Reihenfolge keine Bedeutung hat.<li>— das Listenelement, das sowohl in<ol>als auch in<ul>verwendet wird.list-style-type— die CSS-Eigenschaft zur Auswahl des Markierungsstils.
So gestalten Sie ein HTML-<ol>-Tag
{
"tag_name": "ol"
}