Geordnete Listen: ol, start, reversed und type
Erstellen Sie nummerierte Listen und passen Sie deren Reihenfolge an.
Geordnete Listen: ol, start, reversed und type ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist eine geordnete Liste?
Eine geordnete Liste zeigt Elemente an, bei denen die Reihenfolge wichtig ist:
<ol>
<li>Install Node.js</li>
<li>Create project folder</li>
<li>Run npm init</li>
<li>Install dependencies</li>
</ol>Das ol-Element
Das <ol>-Element (geordnete Liste) stellt Listenelemente standardmäßig mit fortlaufenden Zahlen dar:
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
<!-- Numbers are generated by the browser -->
<!-- You do not need to type 1. 2. 3. -->
<!-- Reordering items updates numbering automatically -->Das start-Attribut
Das start-Attribut legt die Startnummer fest:
<p>Steps 1-3 are covered in Part One. Continuing from step 4:</p>
<ol start="4">
<li>Configure the database</li>
<li>Set environment variables</li>
<li>Run migrations</li>
</ol>
<!-- Numbers start at 4, 5, 6 -->Das reversed-Attribut
Das reversed-Attribut zählt statt aufwärts abwärts:
<!-- Top 3 countdown -->
<ol reversed>
<li>Bronze: 95 points</li>
<li>Silver: 98 points</li>
<li>Gold: 100 points</li>
</ol>
<!-- Renders: 3. Bronze... 2. Silver... 1. Gold -->
<!-- reversed is a boolean attribute — no value needed -->Das type-Attribut
Das type-Attribut ändert den Markierungsstil:
<ol type="1">...</ol> <!-- 1, 2, 3 (default) -->
<ol type="a">...</ol> <!-- a, b, c (lowercase letters) -->
<ol type="A">...</ol> <!-- A, B, C (uppercase letters) -->
<ol type="i">...</ol> <!-- i, ii, iii (lowercase Roman) -->
<ol type="I">...</ol> <!-- I, II, III (uppercase Roman) -->type in CSS und HTML
Bevorzugen Sie CSS-list-style-type gegenüber dem HTML-Attribut type:
<!-- HTML type (still valid): -->
<ol type="A">
<li>Option A</li>
</ol>
<!-- CSS approach (separates concerns): -->
<!--
ol.lettered {
list-style-type: upper-alpha;
}
-->
<ol class="lettered">
<li>Option A</li>
</ol>value-Attribut bei li
Überschreiben Sie die Nummer einzelner Listenelemente mit value:
<ol>
<li>First item</li>
<li value="10">Tenth item</li> <!-- jumps to 10 -->
<li>Eleventh item</li> <!-- continues: 11 -->
</ol>Verschachtelte ol- und ul-Listen
Listen können verschachtelt werden – geordnete und ungeordnete Listen lassen sich kombinieren:
<ol>
<li>
Install tools
<ul>
<li>VS Code</li>
<li>Node.js</li>
</ul>
</li>
<li>Create project</li>
<li>Write code</li>
</ol>Semantische Anwendungsfälle
Verwenden Sie <ol>, wenn die Reihenfolge eine Bedeutung hat:
- Schritt-für-Schritt-Anleitungen
- Ranglisten (Top-10-Listen)
- Abschnitte von Rechtsdokumenten
- Rezeptschritte
- Inhaltsverzeichnisse mit nummerierten Abschnitten
Counter-Reset in CSS
Mit CSS-Zählern haben Sie vollständige Kontrolle über den Nummerierungsstil von Listen:
ol {
list-style: none;
counter-reset: step;
}
ol li {
counter-increment: step;
}
ol li::before {
content: 'Step ' counter(step) ': ';
font-weight: bold;
color: #0070f3;
}ol für Breadcrumbs
Eine Breadcrumb-Navigation ist semantisch eine geordnete Liste:
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/docs">Documentation</a></li>
<li><span aria-current="page">HTML Lists</span></li>
</ol>
</nav>Schnelltest
Welches Attribut sorgt dafür, dass eine ol rückwärts zählt?
Zusammenfassung: Geordnete Listen
Die wichtigsten Punkte zu geordneten Listen:
<ol>– fortlaufende Liste, bei der die Reihenfolge wichtig iststart– Nummerierung mit einer benutzerdefinierten Zahl beginnenreversed– rückwärts zählentype– Markierung ändern: 1, a, A, i, Ivaluebei<li>– die Nummer eines einzelnen Elements überschreiben- Verwenden Sie CSS-
list-style-typeund Zähler für mehr Kontrolle
Häufig gestellte Fragen
Ist die Lektion „Geordnete Listen: ol, start, reversed und type“ kostenlos?
Ja — der vollständige Text von „Geordnete Listen: ol, start, reversed und type“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Geordnete Listen: ol, start, reversed und type“?
Erstellen Sie nummerierte Listen und passen Sie deren Reihenfolge an. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Geordnete Listen: ol, start, reversed und type“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Ungeordnete Listen: ul und li
- Geordnete Listen: ol, start, reversed und type
- Definitionslisten: dl, dt und dd
- Verschachtelte Listen und Listenformatierung