HTML <ol>-Tag
Das HTML <ol>-Tag 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 auch andere HTML-Elemente enthalten (Listen, Bilder, Überschriften, Absätze usw.).
Im Allgemeinen haben geordnete Listenelemente einen vorangehenden Marker, wie einen Buchstaben oder eine Zahl.
Folgende Werte können als Nummerierungselemente verwendet werden: Arabische Ziffern (1, 2, 3, ...); lateinische Großbuchstaben (A, B, C, ...); lateinische Kleinbuchstaben (a, b, c, ...); römische Großbuchstaben (I, II, III, ...); römische Kleinbuchstaben (i, ii, iii, ...). Das type-Attribut wird verwendet, um den Typ der nummerierten Liste anzugeben.
Wenn Sie kein zusätzliches Attribut angeben, wird der Inhalt des <ol>-Tags standardmäßig mit arabischen Ziffern beginnend bei 1 nummeriert.
Sowohl das <ol>- als auch das <ul>-Tag stellen eine Liste von Elementen dar. Der Unterschied zum <ol>-Tag besteht jedoch darin, dass die Reihenfolge hier eine Bedeutung hat.
Normalerweise können die <ol>- und <ul>-Tags beliebig tief verschachtelt werden, wobei Sie nach Belieben zwischen ihnen wechseln können.
TIP
Wenn die CSS-Eigenschaften auf das <ol>-Tag angewendet werden, erben die im <li>-Tag verschachtelten Elemente diese.
Syntax
Das <ol>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<ol>) und dem schließenden (</ol>) Tag geschrieben.
Beispiel für das HTML <ol>-Tag:
Beispiel für die geordnete Liste mit HTML <ol>-Tag
<!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 obigen Beispiel haben wir das start-Attribut mit dem Wert "50" verwendet.
Um den Typ der Nummerierungselemente anstelle des type-Attributs festzulegen, verwenden Sie die CSS-Eigenschaft list-style-type.
Beispiel für das HTML <ol>-Tag in Kombination mit der CSS-Eigenschaft list-style-type:
Beispiel für das HTML <ol>-Tag mit einer list-style-type-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Examples of ordered lists</h2>
<ol style="list-style-type: upper-roman">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol style="list-style-type: hebrew">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
<ol style="list-style-type: decimal">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
</body>
</html>Ergebnis
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| compact | compact | Reduziert Einrückungen und Abstand zwischen den Zeilen. Wird in HTML5 nicht unterstützt. Stattdessen empfehlen wir die Verwendung der CSS-Eigenschaft line-height. |
| reversed | reversed | Gibt an, dass die Listenelemente in absteigender Reihenfolge (statt der üblichen aufsteigenden Reihenfolge) angeordnet sein sollen. |
| start | number | Legt die Zahl fest, mit der die geordnete Liste beginnt. Der Wert muss eine ganze Zahl sein, negative Werte können verwendet werden. Bei Verwendung mit Buchstaben (type = "A" und type = "a") entspricht die im Attributwert angegebene Zahl der Ordinalzahl des Buchstabens im Alphabet. Beispiel: start = "5" entspricht dem Buchstaben "E" und die Liste beginnt damit. Wenn start = "27" angegeben wird, wird die Liste zweistellig ("27" = "AA", "28" = "AB", "29" = "AC" ...). |
| type | 1 A a I i | Definiert den Typ des Listenmarkers. |
Das <ol>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.
So stylen Sie ein HTML <ol>-Tag
{
"tag_name": "ol"
}Praxis
Welche Merkmale und Verwendungszwecke hat das HTML <ol>-Tag?