HTML-Kurs / Listen mit ul, ol und dl erstellen und verschachteln

Wählen Sie ol, wenn die Reihenfolge der Elemente wichtig ist, ul, wenn sie keine Rolle spielt, und dl für Namen, die mit Beschreibungen oder Werten verknüpft sind. Diese Elemente beschreiben die Beziehungen zwischen Elementen; ihre Standardnummern und Aufzählungszeichen dienen nur der Darstellung.

Wann sollten Sie ol, ul oder dl verwenden?

Die Elemente in ol und ul verwenden li. In einem dl liefert dt einen Namen und dd liefert seine Beschreibung oder seinen Wert.

Probieren Sie die drei Arten von Listen in derselben Datei aus

Speichern Sie diesen Code als HTML-Datei und öffnen Sie ihn in einem Browser, um die Standarddarstellung von Listen zu vergleichen. Das CSS verlangt die Schriftart Noto Sans KR, wenn sie installiert ist; andernfalls verwendet der Browser eine Ersatzschrift ohne Serifen.

<!doctype html>

<html lang="de-DE">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>HTML-Listen</title>

    <style>

      body { font-family: "Noto Sans KR", sans-serif; }

    </style>

  </head>

  <body>

    <h1>Eine Reise vorbereiten</h1>

    <h2>Ausrüstung</h2>

    <ul>

      <li>Wasser</li>

      <li>Karte</li>

    </ul>

    <h2>Schritte</h2>

    <ol>

      <li>Reisetermine auswählen</li>

      <li>Eine Tasche packen</li>

    </ol>

    <h2>Begriffe</h2>

    <dl>

      <dt>Abfahrt</dt>

      <dd>Der Tag, an dem die Reise beginnt</dd>

      <dt>Ankunft</dt>

      <dd>Der Tag, an dem Sie Ihr Ziel erreichen</dd>

    </dl>

  </body>

</html>

CSS kann die Einrückung und die Marker-Stile ändern. Die wichtige Unterscheidung ist die Reihenfolge- oder Namens-Beschreibungs-Beziehung, die durch HTML ausgedrückt wird.

Ändern der Nummerierung einer geordneten Liste

Ein ol beginnt standardmäßig mit 1. Sein Attribut start ändert die erste Nummer; value auf einem bestimmten li ändert die Nummer dieses Elements.

<ol start="5">

  <li>Fünfter Schritt</li>

  <li value="9">Neunter Schritt</li>

  <li>Zehnter Schritt</li>

</ol>

Die Marker sind 5, 9 und 10. Verwenden Sie reversed, wenn die Nummerierung abwärts gehen soll.

<ol reversed>

  <li>Drittes Element</li>

  <li>Zweites Element</li>

  <li>Erstes Element</li>

</ol>

Alleinstehend zählt diese rückwärts nummerierte Liste ohne Startwert rückwärts ab ihren drei Elementen wie 3, 2, 1. Überprüfen Sie, ob die Nummerierung der vorgesehenen Reihenfolge entspricht.

Nummerierungsattribute verwandeln eine ungeordnete Sammlung nicht in eine bedeutungsvolle Sequenz. Wählen Sie zuerst den Listentyp nach seinem Sinn.

Ordnen Sie die Namen und Beschreibungen mit dl zu.

Ein dl ist nicht auf Wörterbuchdefinitionen beschränkt. Es kann eine Produkteigenschaft mit ihrem Wert oder ein Datum mit seiner Beschreibung verbinden. Halten Sie jeden Eintrag dt und dd leicht zuzuordnen.

<dl>

  <dt>Öffnungszeiten</dt>

  <dd>Unter der Woche, von 9 bis 18 Uhr</dd>

  <dt>Geschlossen</dt>

  <dd>Samstag und Sonntag</dd>

</dl>

Dies sind fiktive Öffnungszeiten, die nur verwendet werden, um die Kennzeichnung zu demonstrieren.

Verschachteln Sie eine Liste innerhalb eines Listenelements

Eine Unterliste gehört innerhalb des li-Elternelements, das sie entwickelt. Hier sind die Kleidungsstücke eine Teil der Reiseausrüstung. Siehe HTML-Syntax für die Regel, verschachtelte Elemente von innen nach außen zu schließen.

<ul>

  <li>Wasser</li>

  <li>Kleidung

    <ul>

      <li>Jacke</li>

      <li>Socken</li>

    </ul>

  </li>

</ul>

Sie können auch ein ul innerhalb eines ol verschachteln. In diesem Beispiel haben die Hauptschritte eine bedeutende Reihenfolge, aber die beiden Gegenstände zum Einpacken haben keine.

<ol>

  <li>Reisetermine auswählen</li>

  <li>Eine Tasche packen

    <ul>

      <li>Kleidung</li>

      <li>Toilettenartikel</li>

    </ul>

  </li>

  <li>Auf Reisen gehen</li>

</ol>

Platzieren Sie keine Unterliste direkt unter einem äußeren ul oder ol; setzen Sie sie innerhalb des entsprechenden li. Vermeiden Sie außerdem, eine ganze Liste innerhalb eines p zu platzieren. Listen und Absätze sind getrennte Strukturen.

Checkliste für das Erstellen von Listen

• Entscheiden Sie, ob die Reihenfolge der Elemente die Bedeutung ändert, bevor Sie ol oder ul wählen.
• Verwenden Sie li für jedes Element einer geordneten oder ungeordneten Liste.
• Klären Sie die Beziehung dt–dd in einer Beschreibungsliste.
• Fügen Sie eine Unterliste innerhalb ihres übergeordneten Elements li ein, und verwenden Sie CSS für das Aussehen des Markers.

Für weitere Beispiele sehen Sie sich den MDN-Leitfaden zu HTML-Listen an. Um eine Liste in einem echten Satz von Seiten zu verwenden, beginnen Sie mit der Dateistruktur in Erstellen einer kleinen mehrseitigen Website.