HTML : Erstellen Sie strukturierte numerierte Listen

Was ist ein HTML `<ol>`-Element?

Das HTML <ol>-Element, auch geordnete Liste genannt, ermöglicht es dir, strukturierte numerierte Listen auf deiner Webseite zu erstellen. Diese Listen sind nützlich für die Darstellung von Informationen in einer sequenziellen Reihenfolge oder für die Strukturierung von Aufzählungen, Schritten oder Ranglisten.

Verwende das `<ol>`-Element für:

Chronologische Abläufe
Checklisten
Ranglisten
Kochrezepte
Auflistung von Aufgaben oder Anweisungen

Das <ol>-Element bietet eine bessere semantische Bedeutung für numerierte Listen als das <ul>-Element (ungeordnete Liste), das für nicht sequenzielle Listen verwendet wird. Suchmaschinen können den Inhalt der <ol>-Liste besser verstehen und entsprechend indexieren.

Wie erstelle ich eine einfache numerierte Liste?

Erstelle eine numerierte Liste in HTML, indem du das <ol>-Element verwendest. Dies steht für "Ordered List" (geordnete Liste) und ist dazu bestimmt, Elemente in einer bestimmten Reihenfolge anzuzeigen.

Syntax

<ol>
  <li>Erstes Element</li>
  <li>Zweites Element</li>
  <li>Drittes Element</li>
</ol>

Vorgehensweise

Erstelle das <ol>-Element: Umgebe deinen Listeninhalt mit dem <ol>-Tag.
Füge Listenelemente (<li>) hinzu: Jedes Element in der Liste ist in einem <li>-Tag enthalten.
Schließe das <ol>-Element: Schließe die Liste mit dem Tag </ol>.

Beispiel

Dieser Code erstellt eine einfache numerierte Liste mit drei Elementen:

<ol>
  <li>Kaffee</li>
  <li>Tee</li>
  <li>Saft</li>
</ol>

Ergebnis:

Kaffee
Tee
Saft

Kann ich die Nummerierung anpassen?

Ja, du kannst die Nummerierung deiner Listen anpassen. Hier sind einige Optionen:

Type Attribut

Mit dem type-Attribut kannst du den Typ der Nummerierung festlegen. Die folgenden Optionen stehen zur Verfügung:

1 (Standard): Arabische Ziffern (1, 2, 3, …)
a : Kleinbuchstaben (a, b, c, …)
A : Großbuchstaben (A, B, C, …)
i : Römische Ziffern in Kleinbuchstaben (i, ii, iii, …)
I : Römische Ziffern in Großbuchstaben (I, II, III, …)

Start Attribut

Mit dem start-Attribut kannst du die Startnummer der Liste festlegen. Dies ist nützlich, wenn du eine Liste mit einer Nummerierung fortsetzen möchtest, die bereits auf einer anderen Seite oder in einem anderen Dokument verwendet wurde.

Reverse Attribut

Das reverse-Attribut kehrt die Reihenfolge der Nummerierung um. Dies erstellt eine Liste mit absteigenden Nummern.

Wie füge ich Elemente zu einer bestehenden Liste hinzu?

Elemente am Ende einer Liste hinzufügen

Um ein Element am Ende einer vorhandenen Liste hinzuzufügen, füge einfach ein neues <li>-Element innerhalb des <ol>-Tags hinzu.

<ol>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Neues Element</li>
</ol>

Elemente an einer bestimmten Position einfügen

Mithilfe des start-Attributs kannst du festlegen, ab welcher Zahl die Liste nach dem hinzugefügten Element weiterzählt.

<ol>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Neues Element</li> <!-- start="3" -->
  <li>Element 4</li>
</ol>

Elemente zwischen vorhandenen Elementen einfügen

Um ein Element zwischen zwei vorhandenen Elementen einzufügen, verwende das insertBefore()– und appendChild()-Methoden des DOM.

const ol = document.querySelector("ol");
const newItem = document.createElement("li");
newItem.textContent = "Neues Element";

const refItem = ol.querySelector("li:nth-child(2)"); // Zweites Element als Referenz

ol.insertBefore(newItem, refItem); // Neues Element wird vor dem Referenzelement eingefügt

Tipps zum Hinzufügen von Elementen

Verwende die append()-Methode anstelle von innerHTML, um Cross-Site-Scripting (XSS)-Angriffe zu verhindern.
Überprüfe, ob die Liste das reversed-Attribut hat, und füge Elemente entsprechend hinzu.
Überprüfe die Browserunterstützung für die verwendete Methode (z. B. insertBefore()).

Wie entferne ich Elemente aus einer Liste?

Entfernen eines einzelnen Elements

Um ein einzelnes Element aus einer numerierten Liste zu entfernen, kannst du die Methode removeChild() verwenden. Diese entfernt das angegebene Element und alle seine untergeordneten Elemente aus der Liste.

const elementToRemove = document.querySelector('li');
elementToRemove.parentNode.removeChild(elementToRemove);

Entfernen mehrerer Elemente

Um mehrere Elemente aus einer Liste zu entfernen, kannst du eine Schleife verwenden, um jedes Element einzeln zu entfernen.

const list = document.querySelector('ol');
const elementsToRemove = list.querySelectorAll('li:nth-child(2n)');
elementsToRemove.forEach((element) => {
  element.parentNode.removeChild(element);
});

Entfernen aller Elemente

Um alle Elemente aus einer Liste zu entfernen, kannst du die Methode innerHTML verwenden, um den Inhalt der Liste auf einen leeren String zu setzen.

const list = document.querySelector('ol');
list.innerHTML = '';

Tipps zum Entfernen von Elementen

Stelle sicher, dass du das richtige Element zum Entfernen auswählst, um unerwünschte Änderungen an deiner Liste zu vermeiden.
Verwende die Methode removeChild() für ein einzelnes Element und eine Schleife für mehrere Elemente.
Nutze innerHTML nur, wenn du alle Elemente aus einer Liste entfernen möchtest.

Kann ich verschachtelte Listen erstellen?

Ja, du kannst in HTML verschachtelte Listen erstellen, indem du eine

Verschachtelte Listen erstellen

Um eine verschachtelte Liste zu erstellen, fügst du einfach eine weitere

<ol>
  <li>Element der ersten Ebene</li>
  <li>Element der zweiten Ebene</li>
  <ol>
    <li>Element der dritten Ebene</li>
    <li>Element der dritten Ebene</li>
  </ol>
</ol>

Dies würde eine zweistufige Liste erzeugen, wobei das zweite Element eine verschachtelte Liste mit zwei Elementen enthält.

Nummerierung von verschachtelten Listen

Die Nummerierung verschachtelter Listen kann angepasst werden, indem das start-Attribut für die innere

<ol>
  <li>Element der ersten Ebene</li>
  <li>Element der zweiten Ebene</li>
  <ol start="3">
    <li>Element der dritten Ebene</li>
    <li>Element der dritten Ebene</li>
  </ol>
</ol>

In diesem Beispiel würde die verschachtelte Liste mit der Nummer 3 beginnen, sodass die Elemente der dritten Ebene als "3." und "4." nummeriert würden.

Wie style ich eine numerierte Liste?

Du kannst das Aussehen deiner numerierten Liste anpassen, indem du CSS-Eigenschaften verwendest. Diese Eigenschaften ermöglichen es dir, Farbe, Schriftart, Größe und andere Aspekte der Liste zu steuern.

Schriftart und -größe

Um die Schriftart und -größe der Listenelemente zu ändern, verwende die Eigenschaften font-family und font-size. Beispielsweise kannst du die Schriftart auf Arial und die Größe auf 16px festlegen:

ol {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

Farbe

Du kannst die Farbe der Listennummern oder des Listentextes mit den Eigenschaften color und background-color ändern. Beispielsweise kannst du die Listennummern rot und den Text blau machen:

ol {
  color: blue;
  list-style-type: none;
}

ol li {
  color: red;
  padding-left: 1em;
}

Aufzählungszeichen

Du kannst das Aussehen des Aufzählungszeichens mit der Eigenschaft list-style-type anpassen. Diese Eigenschaft akzeptiert verschiedene Werte, wie z. B. disc, circle, square oder none. Beispielsweise kannst du das Aufzählungszeichen zu einem Quadrat machen:

ol {
  list-style-type: square;
}

Platzierung

Du kannst die Positionierung des Listentexts mit den Eigenschaften padding und margin anpassen. Beispielsweise kannst du etwas Auffüllung um jeden Listenpunkt herum hinzufügen:

ol li {
  padding: 10px;
}

Tipps

Verwende konsistente Stile für deine Listen, um ein einheitliches Erscheinungsbild zu gewährleisten.
Verwende eindeutige Schriftarten und Farben, um deine Listen von anderen Elementen auf deiner Seite abzuheben.
Achte auf die Barrierefreiheit, stelle sicher, dass deine Listen für alle Benutzer zugänglich sind, einschließlich derer mit Sehbehinderungen.

Browserunterstützung für

Das HTML <ol>-Element wird von allen modernen Browsern vollständig unterstützt, darunter:

Desktop-Browser

Google Chrome
Mozilla Firefox
Microsoft Edge
Apple Safari
Opera

Mobile-Browser

Google Chrome für Android
Mozilla Firefox für Android
Safari für iOS
Opera für Android
Samsung Internet Browser

Browserkompatibilitätstabellen

Wenn du eine detailliertere Liste mit Informationen zur Browserunterstützung benötigst, kannst du die folgenden Ressourcen konsultieren:

Kompatibilitätsprobleme

Es sind keine nennenswerten Kompatibilitätsprobleme beim Verwenden des <ol>-Elements bekannt. Es funktioniert in allen gängigen Browserversionen wie erwartet.

Tipps zur Verwendung von numerierten Listen

Numerierte Listen sind ein praktisches Werkzeug, um Inhalte in eine logische und strukturierte Reihenfolge zu bringen. Hier sind einige Tipps, die dir helfen können, das Beste aus numerierten Listen in deinem HTML-Code herauszuholen:

Barrierefreiheit beachten

Stelle sicher, dass deine numerierte Liste für alle zugänglich ist. Verwende aria-label-Attribute, um assistierenden Technologien (z. B. Bildschirmlesegeräten) den Zweck der Liste zu vermitteln. Erwäge auch die Verwendung von visuellem Feedback wie Pfeiltasten, um die Navigation zu erleichtern.

Semantik verwenden

Wähle den richtigen Listentyp für deine Inhalte. Wenn die Reihenfolge der Elemente wichtig ist, verwende <ol>, ansonsten verwende <ul>. Dies hilft Suchmaschinen und anderen Tools, die Struktur deiner Inhalte zu verstehen.

Verschachtelung mit Bedacht einsetzen

Verschachtelte Listen können die Struktur komplexer Inhalte erleichtern. Übertreibe es jedoch nicht mit der Verschachtelung. Mehrere Ebenen können die Lesbarkeit erschweren.

Styling konsistent halten

Verwende CSS, um das Erscheinungsbild deiner numerierten Listen zu steuern. Passe die Schriftart, Schriftgröße, Nummerierung und Einzüge an, um sie mit dem Design deiner Website in Einklang zu bringen. Beispielsweise kannst du folgende CSS-Eigenschaften verwenden:

font-family
font-size
list-style-type
list-style-position
padding-left

Kompatibilität testen

Überprüfe die Kompatibilität deiner numerierten Listen in verschiedenen Browsern. Ältere Browser unterstützen möglicherweise nicht alle Funktionen von <ol>, sodass du sicherstellen musst, dass deine Inhalte auf den Zielplattformen korrekt dargestellt werden.

Mit Vorsicht verwenden

Numerierte Listen können zwar nützlich sein, sollten jedoch nicht überstrapaziert werden. Zu viele Listen können eine Website unübersichtlich machen und die Lesbarkeit beeinträchtigen. Verwende sie nur, wenn sie die Struktur und Übersichtlichkeit deiner Inhalte wirklich verbessern.