HTML5: Geordnete Listen erstellen („ordered lists“)

Eine nummerierte Liste ist hilfreich, wenn du Dinge in einer bestimmten Reihenfolge aufzählen möchtest. Sie zeigt dir eine Liste, bei der jedes Element eine Nummer hat. Die Nummern geben an, in welcher Reihenfolge die Liste gelesen oder bearbeitet werden sollte. Nummerierte Listen werden unter anderem dafür verwendet, um Schritte zu erklären, ein Ranking zu zeigen oder Prioritäten zu setzen.

Was ist eine nummerierte Liste?

Im Gegensatz zu einer unsortierten Liste (die mit Punkten dargestellt wird), besteht eine nummerierte Liste aus Elementen, die chronologisch oder nach Priorität sortiert sind. Die Nummerierung gibt dabei die Reihenfolge der Elemente an.

Zum Beispiel:

  1. Frühstück machen
  2. Zähne putzen
  3. Zur Arbeit fahren

Hier zeigt die Reihenfolge deutlich, welche Aufgabe zuerst erledigt werden sollte: erst das Frühstück, dann die Zähne.

Wann benutzt man nummerierte Listen?

Nummerierte Listen eignen sich besonders gut in Situationen, in denen die Reihenfolge wichtig ist. Typische Anwendungsfälle sind:

  • Schritt-für-Schritt-Anleitungen (z. B. Rezepte oder Montageanleitungen wie „Schraube A in Loch B drehen“).
  • Prioritäten (z. B. Aufgaben mit der Bedeutung „wichtigster Punkt zuerst“).
  • Gerankte Listen (z. B. eine Liste der „5 besten Filme“).

So erstellt man eine nummerierte Liste in HTML

Um nummerierte Listen zu schreiben, verwendet man in HTML das <ol>-Element. Dieses Element sagt dem Browser, dass es sich um eine nummerierte Liste (ordered list) handelt. Jede einzelne Nummer in der Liste wird mit <li> (list item) definiert. Hier ein einfaches Beispiel:

<ol>
  <li>Schuhe kaufen</li>
  <li>Rechnung bezahlen</li>
  <li>Freunde treffen</li>
</ol>

Das erzeugt eine nummerierte Liste:

  1. Schuhe kaufen
  2. Rechnung bezahlen
  3. Freunde treffen

Mögliche Attribute in HTML zur Personalisierung

HTML bietet verschiedene Möglichkeiten, um nummerierte Listen anzupassen. Hier sind einige gängige Optionen:

1. type-Attribut: Den Stil der Nummerierung ändern

Das type-Attribut verändert, wie die Nummerierung in der Liste aussieht:

  • type="1": Ganz normale Zahlen (Standard, 1, 2, 3, …).
  • type="A": Großbuchstaben (A, B, C, …).
  • type="a": Kleinbuchstaben (a, b, c, …).
  • type="I": Römische Zahlen in Großbuchstaben (I, II, III, …).
  • type="i": Römische Zahlen in Kleinbuchstaben (i, ii, iii, …).

Beispiel:

<ol type="A">
  <li>Option A</li>
  <li>Option B</li>
  <li>Option C</li>
</ol>

Das ergibt eine Liste mit Großbuchstaben: A. Option A
B. Option B
C. Option C

2. start-Attribut: Die Nummerierung ändern

Das start-Attribut legt fest, mit welcher Nummer die Liste beginnen soll.

Beispiel:

<ol start="5">
  <li>Punkt 5</li>
  <li>Punkt 6</li>
  <li>Punkt 7</li>
</ol>

Ergebnis:

  1. Punkt 5
  2. Punkt 6
  3. Punkt 7

3. reversed-Attribut: Rückwärts zählen

Das reversed-Attribut dreht die Nummerierung um, sodass die Liste von hinten nach vorne gezählt wird.

Beispiel:

<ol reversed>
  <li>Platz 3</li>
  <li>Platz 2</li>
  <li>Platz 1</li>
</ol>

Ergebnis:

  1. Platz 3
  2. Platz 2
  3. Platz 1

Beispiele aus der realen Welt

Beispiel 1: Kochrezept

  1. Zutaten vorbereiten
  2. Gemüse schneiden
  3. Alles in einen Topf geben
  4. Kochen lassen

Beispiel 2: Prioritätenliste

  1. Deadline-Projekt fertigstellen
  2. E-Mails beantworten
  3. Meeting vorbereiten

Beispiel 3: Top-Verkauft-Liste im Webshop

  1. Smartphone
  2. Laptop
  3. Tablet

Attribute kombinieren

Es ist möglich, mehrere Attribute zu kombinieren, um die Liste weiter zu personalisieren. Zum Beispiel:

<ol type="I" start="4">
  <li>Kapitel 4</li>
  <li>Kapitel 5</li>
  <li>Kapitel 6</li>
</ol>

Ergebnis: IV. Kapitel 4
V. Kapitel 5
VI. Kapitel 6

Zusammenfassung

Eine nummerierte Liste ist eine praktische Möglichkeit, um Inhalte mit einer festen Reihenfolge zu organisieren. Mit den Attributen type, start und reversed kannst du sie nach deinen Wünschen anpassen. Nummerierte Listen werden für viele Dinge verwendet, wie Anleitungen, Prioritäten oder Rankings.