HTML - Geordnete Listen

Eine geordnete Liste erstellen

In HTML wird eine geordnete Liste mit dem <ol>-Tag erstellt. Der <ol>-Tag dient als Container für die Listenelemente, die durch den <li>-Tag dargestellt werden. Jeder <li>-Tag repräsentiert ein Element in der geordneten Liste.

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

Der <ol>-Tag umschließt die Listenelemente, und jedes Element ist in einem <li>-Tag eingeschlossen. Der Browser nummeriert die Elemente in aufsteigender Reihenfolge, beginnend mit 1.

Sie können so viele Listenelemente wie nötig innerhalb des <ol>-Tags hinzufügen. Jeder <li>-Tag kann Text, Bilder oder andere HTML-Elemente enthalten.

<ol>
  <li>Obst
    <ol>
      <li>Apfel</li>
      <li>Banane</li>
      <li>Orange</li>
    </ol>
  </li>
  <li>Gemüse
    <ol>
      <li>Karotte</li>
      <li>Brokkoli</li>
      <li>Spinat</li>
    </ol>
  </li>
</ol>

Das Beispiel zeigt eine geordnete Liste mit zwei Hauptelementen: "Obst" und "Gemüse". Jedes dieser Elemente enthält eine verschachtelte geordnete Liste mit spezifischen Obst- und Gemüsesorten. Der Browser zeigt die Liste mit korrekter Einrückung und Nummerierungshierarchie an.

Standardmäßig erstellt der <ol>-Tag eine nummerierte Liste, die mit 1 beginnt. Sie können jedoch den Nummerierungsstil und den Startwert mit den Attributen type und start ändern, was im nächsten Abschnitt behandelt wird.

Anpassung von geordneten Listen

HTML bietet Optionen zur Anpassung des Aussehens und Verhaltens von geordneten Listen. Sie können den Nummerierungsstil ändern und die Nummerierung ab einem bestimmten Wert beginnen lassen, indem Sie die Attribute type und start verwenden.

<ol type="A">
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
  <li>Dritter Punkt</li>
</ol>

<ol type="i">
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
  <li>Dritter Punkt</li>
</ol>

<ol start="5">
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
  <li>Dritter Punkt</li>
</ol>

Verschachtelte geordnete Listen

Sie können geordnete Listen in HTML verschachteln, um eine hierarchische Struktur zu erstellen. Durch Verschachtelung können Sie Unterlisten oder Unterelemente innerhalb eines Hauptlistenelements darstellen. Dies ist nützlich, wenn Sie eine Liste in mehrere Ebenen oder Kategorien unterteilen möchten.

Um eine verschachtelte geordnete Liste zu erstellen, platzieren Sie ein <ol>-Tag innerhalb eines <li>-Tags der übergeordneten Liste. Die verschachtelte Liste wird zu einem untergeordneten Element des übergeordneten Listenelements.

<ol>
  <li>Hauptpunkt 1
    <ol>
      <li>Unterpunkt 1.1</li>
      <li>Unterpunkt 1.2</li>
      <li>Unterpunkt 1.3</li>
    </ol>
  </li>
  <li>Hauptpunkt 2
    <ol>
      <li>Unterpunkt 2.1</li>
      <li>Unterpunkt 2.2</li>
    </ol>
  </li>
  <li>Hauptpunkt 3</li>
</ol>

Wir haben eine Hauptliste mit drei Elementen. Die ersten beiden Elemente, "Hauptpunkt 1" und "Hauptpunkt 2", enthalten verschachtelte geordnete Listen.

Die verschachtelten Listen sind eingerückt und haben ihre eigene Nummerierungsfolge. Die Unterpunkte unter "Hauptpunkt 1" sind als 1.1, 1.2 und 1.3 nummeriert, während die Unterpunkte unter "Hauptpunkt 2" als 2.1 und 2.2 nummeriert sind.

Sie können geordnete Listen über mehrere Ebenen verschachteln, indem Sie zusätzliche <ol>-Tags innerhalb der <li>-Tags der verschachtelten Listen platzieren. Dies ermöglicht es Ihnen, komplexe hierarchische Strukturen zu erstellen.

<ol>
  <li>Hauptpunkt 1
    <ol>
      <li>Unterpunkt 1.1
        <ol>
          <li>Unter-Unterpunkt 1.1.1</li>
          <li>Unter-Unterpunkt 1.1.2</li>
        </ol>
      </li>
      <li>Unterpunkt 1.2</li>
    </ol>
  </li>
  <li>Hauptpunkt 2</li>
</ol>

Wir haben eine mehrstufig verschachtelte geordnete Liste. "Unterpunkt 1.1" enthält seine eigene verschachtelte geordnete Liste mit zwei Unter-Unterpunkten.

Bei der Verschachtelung von geordneten Listen ist es wichtig, die Hierarchie und Einrückung klar und logisch zu halten. Dies verbessert die Lesbarkeit und das Verständnis der Listenstruktur sowohl für Benutzer als auch für Suchmaschinen.

Verschachtelte geordnete Listen werden häufig in verschiedenen Szenarien verwendet, wie zum Beispiel beim Erstellen von Gliederungen, der Darstellung hierarchischer Daten oder der Anzeige mehrstufiger Navigationsmenüs.

Styling von geordneten Listen mit CSS

HTML bietet die Struktur für geordnete Listen, während CSS es ermöglicht, deren Aussehen zu gestalten und zu ändern. Mit CSS können Sie das Erscheinungsbild von Listenmarkierungen, Farben und Abständen anpassen sowie andere Stile anwenden, um Ihre geordneten Listen optisch ansprechender zu gestalten und an das Design Ihrer Website anzupassen.

Um eine geordnete Liste zu stylen, können Sie das <ol>-Tag und dessen Listenelemente (<li>) mit CSS-Selektoren verwenden. Hier sind einige gängige CSS-Eigenschaften, die Sie nutzen können:

ol {
  list-style-type: lower-roman;
}

ol {
  color: #333;
}

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

ol {
  padding-left: 20px;
  margin-bottom: 20px;
}

li {
  margin-bottom: 10px;
}

ol {
  background-color: #f5f5f5;
}

li {
  background-color: #fff;
  padding: 5px;
}

Sie können auch CSS-Pseudoklassen verwenden, um bestimmte Listenelemente oder Zustände zu stylen. Zum Beispiel:

• :first-child und :last-child: Zielen auf das erste und letzte Listenelement ab.
• :nth-child(odd) und :nth-child(even): Stylen ungerade oder gerade Listenelemente unterschiedlich.
• :hover: Wendet Stile an, wenn der Benutzer mit der Maus über ein Listenelement fährt.

li:first-child {
  font-weight: bold;
}

li:last-child {
  color: #ff0000;
}

li:nth-child(odd) {
  background-color: #f9f9f9;
}

li:hover {
  text-decoration: underline;
}

Durch die Kombination dieser CSS-Eigenschaften und Selektoren können Sie ansprechende geordnete Listen erstellen, die zum Design Ihrer Website passen.

Achten Sie darauf, Ihre Stile einheitlich zu halten und berücksichtigen Sie die Lesbarkeit und Zugänglichkeit Ihrer Listen. Verwenden Sie passende Farbkontraste, Schriftgrößen und Abstände, um sicherzustellen, dass Ihre geordneten Listen für alle Benutzer gut lesbar und verständlich sind.

Barrierefreiheitsaspekte

Bei der Verwendung von geordneten Listen in HTML ist es wichtig, die Barrierefreiheit zu berücksichtigen. Geordnete Listen sollten sinnvoll und mit der richtigen Struktur eingesetzt werden, um allen Nutzern, einschließlich denen, die unterstützende Technologien verwenden, das Verständnis und die Navigation der Inhalte zu erleichtern.

Hier sind einige bewährte Methoden für die Verwendung von geordneten Listen zur Verbesserung der Barrierefreiheit im Web:

Zusätzlich zur Befolgung dieser bewährten Methoden ist es wichtig, bei Bedarf aussagekräftige Textalternativen für Listenelemente bereitzustellen. Dies ist besonders relevant, wenn die Listenelemente Bilder oder Symbole ohne begleitenden Text enthalten.

<ol>
  <li>
    <img src="step1.jpg" alt="Schritt 1: Geben Sie Ihren Benutzernamen und Ihr Passwort ein">
  </li>
  <li>
    <img src="step2.jpg" alt="Schritt 2: Klicken Sie auf die Login-Schaltfläche">
  </li>
  <li>
    <img src="step3.jpg" alt="Schritt 3: Greifen Sie auf Ihr Konto-Dashboard zu">
  </li>
</ol>

Jeder Listenpunkt enthält ein Bild, das einen Schritt in einem Prozess darstellt. Um den Inhalt barrierefrei zu machen, wird das alt-Attribut verwendet, um eine Textalternative für jedes Bild bereitzustellen. Der alternative Text beschreibt klar die Aktion oder den Zweck jedes Schritts.

Durch die Bereitstellung aussagekräftiger Textalternativen können Nutzer, die auf Screenreader angewiesen sind oder Bilder deaktiviert haben, den Inhalt immer noch verstehen und den Schritten folgen.

Denken Sie daran, dass Barrierefreiheit ein wesentlicher Aspekt der Webentwicklung ist. Durch die angemessene Verwendung von geordneten Listen und die Befolgung von Barrierefreiheitsrichtlinien können Sie inklusive und benutzerfreundliche Web-Erlebnisse für alle Nutzer schaffen.