HTML-Listen

Zutatenlisten, Morgenroutinen, Feature-Bullets und Packlisten lassen sich als Listen leichter scannen. HTML bietet zwei Alltagstrukturen: ungeordnete und geordnete Listen. Nach dem Plug-in-Hinweis (Geschichte, keine Code-Samples) kehrt diese Session zu Markup zurück, das du auf fast jeder Inhaltsseite wiederverwendest. Sieh Listen als Bedeutung für Gruppen und Sequenzen — nicht als Shortcut für Mehrspalten-Layout.

Wofür Listen da sind

Eine Liste markiert verwandte Einträge als Gruppe. Browser und Hilfstechnologien können ankündigen, wie viele Einträge es gibt, und sie einzeln durchlaufen. Das hilft beim Überfliegen, bei Outlines und Rezepten. Die Bedeutung verschwindet, wenn du Aufzählungszeichen mit zufälligen Bindestrichen in Absätzen fälschst oder ul nur nutzt, um Text in visuelle Spalten zu drücken. Wähle Listen-Markup, wenn der Inhalt wirklich eine Menge oder Sequenz ist. Dekorativen Abstand und Grid-Layout spare für späteres CSS auf.

Direkte Antwort

• ul — ungeordnete Liste (Bullets standardmäßig im Browser)
• ol — geordnete Liste (Zahlen standardmäßig)
• li — jeder Listeneintrag
  Verschachtele eine weitere ul oder ol in einem li, wenn du Unterpunkte brauchst. Lass kein li außerhalb seiner Elternliste schweben. Schlusstags müssen in umgekehrter Öffnungsreihenfolge schließen, besonders sobald du unter einem Schritt eine Unterliste hinzufügst.

Wann welche Liste

Wähle das Element, das zur Idee passt, die du schreibst — nicht zum Look, den CSS später vielleicht liefert. Bullets und Zahlen sind Standarddarstellungen; die HTML-Entscheidung ist, ob Reihenfolge Teil der Bedeutung ist.

Ungeordnete Liste

Eine Einkaufsliste mit Bullets ist die klassische ul-Demo. Jeder Eintrag ist ein li. Starte hier, wenn Einträge gleichrangig sind — Obstnamen, Hobby-Labels oder Feature-Highlights, die sich ohne Lektionsschaden umsortieren ließen.

Die ungeordnete Probe lesen

• ul öffnet den ungeordneten Listencontainer
• Jedes li ist ein Eintrag in dieser Gruppe
• Schlusstags müssen korrekt verschachteln: schließe jedes li, bevor du ul schließt
• Standard-Bullets sind Browserstil; späteres CSS kann Marker ändern, die HTML-Bedeutung bleibt „ungeordnete Menge“
• Leere li-Elemente und fehlende Schlüsse sind häufige Tippfehler — sieh die Seite früh an, um sie zu fangen

Geordnete Liste mit verschachtelter Unterliste

Nummerierte Schritte brauchen oft eine kleine Bullet-Gruppe unter einem Schritt — Dateien zum Anlegen, Tools zum Öffnen oder Zutaten nur für diesen Schritt. Lege die innere Liste in das li dieses Schritts, nicht als Geschwister neben die ganze ol. Die äußeren Zahlen bleiben lesbar, während innere Bullets Details klären.

Die verschachtelte Probe lesen

• Die äußere ol nummeriert die Hauptschritte der Reihe nach
• Das zweite li enthält Einleitungstext plus eine Kind-ul
• Innere li-Elemente gehören zur verschachtelten ul; diese ul schließt, bevor das Eltern-li schließt
• Der dritte Schritt setzt die äußere geordnete Sequenz fort, nachdem der verschachtelte Block endet
• Das Muster skaliert zu tieferen Nestern, aber halte Anfängerbäume flach, damit Öffnen/Schließen klar bleibt
• Wenn Zahlen „falsch“ wirken, prüfe, ob ein li zu früh geschlossen wurde und die Unterliste nach außen schob

Bedeutung zuerst, Styling später

Browser zeichnen Bullets und Zahlen ohne Extra-CSS. Diese Bequemlichkeit verführt dazu, Listen als Einrückmaschinen oder Fake-Sidebars zu missbrauchen. Widerstehe hier. Ist der Inhalt eine Menge oder Sequenz, ist Listen-Markup die richtige semantische Wahl — auch bevor du Marker umgestaltest. Brauchst du nebeneinanderliegende Karten, eine Nav-Grid oder Magazinspalten, warte auf CSS- und Struktur-Layout-Lektionen — biege ul nicht zum Seiten-Framework, nur weil Menüs später mit sorgfältigem Styling Listen nutzen.

Barrierefreiheit und Scan-Gewohnheiten

Listen helfen beim Überfliegen und Hilfstechnik meldet Phrasen wie „Liste mit drei Einträgen“. Halte jedes li möglichst auf eine Idee fokussiert. Stopfe keine riesigen unverbundenen Absätze in jeden Eintrag, außer der Inhalt braucht wirklich diese Tiefe. Verschachtele nur bei echter Hierarchie — Fake-Nesting nur zum Einrücken verwirrt Menschen und Tools. Eine kurze Überschrift über der Liste klärt oft, worum die Gruppe geht, bevor der erste Bullet erscheint.

Übung im Editor

1. Mache eine ul mit drei Hobbys (oder drei Speisen — halte Einträge kurz).
2. Mache eine ol mit drei Morgenschritten in der Reihenfolge, in der du sie wirklich machst.
3. Verschachtele eine kleine ul unter einem dieser li (z. B. Dateien zum Öffnen oder Tools zum Greifen).
4. Validiere mental: jedes li sitzt in einer ul oder ol; verschachtelte Listen sitzen in einem li.
5. Tausche den Typ einer Liste (ul ↔ ol) und frage, ob die Bedeutung noch zum Inhalt passt.
6. Sieh die Seite im Browser an und bestätige, dass Bullets/Zahlen ohne CSS erscheinen.
7. Brich die Verschachtelung absichtlich einmal, notiere wie falsch die Outline wirkt, und repariere die Schlüsse.

Leichte Fehler

• li außerhalb jeder ul/ol schreiben (verwaiste Einträge)
• Listen nur nutzen, um zufällige Absätze einzurücken oder Fake-Spalten zu bauen
• Verschachtelte Listen in falscher Reihenfolge schließen vergessen
• Eine verschachtelte ul als Geschwister von li setzen statt in ein li
• ol für Einträge ohne Sequenz wählen (oder ul für strenge Schrittnummern) ohne über Bedeutung nachzudenken
• Listen-Markup aus Layout-only-Tutorials kopieren, die ul als Menü-Grid behandeln, ohne Semantik zuerst zu lehren
• Die äußere Liste nach einem langen Nest-Block ungeschlossen lassen

Zusammenfassung

• ul + li für ungeordnete Mengen (Bullets standardmäßig)
• ol + li für geordnete Sequenzen (Zahlen standardmäßig)
• Verschachtele eine Unterliste in einem li, nicht neben der Elternliste
• Wähle den Listentyp, der zur Bedeutung passt
• Nutze Listen nicht als Ersatz für CSS-Layout-Spalten
• Nach der Plug-in-Geschichtsnotiz bringen Listen dich zurück zu alltäglichem strukturellen HTML, das du weiter verwendest