Listen: geordnet & ungeordnet

Menschen lieben Listen. Einkaufszettel, Zutatenlisten, Top-10-Rankings, Schritt-für-Schritt-Anleitungen – kaum eine Textform lässt sich so schnell erfassen. HTML trägt dem Rechnung und stellt gleich drei Listenarten bereit, jede mit eigener Bedeutung. In dieser Lektion lernst du alle drei kennen, verschachtelst Listen ohne den klassischen Stolperstein und erfährst nebenbei, warum fast jede Navigation im Web in Wahrheit eine Liste ist.

Die ungeordnete Liste <ul> (unordered list) ist die Liste mit den Aufzählungspunkten. „Ungeordnet“ heißt dabei nicht chaotisch, sondern: Die Reihenfolge der Einträge trägt keine Bedeutung. Ob Mehl vor oder nach der Milch auf dem Einkaufszettel steht, ändert nichts – der Einkauf gelingt trotzdem.

Jeder einzelne Eintrag steckt in einem <li>-Element (list item). Und hier kommt die wichtigste Grammatikregel dieser Lektion: Direkt in ein <ul> gehören ausschließlich <li>-Elemente. Kein nackter Text, kein <p>, nichts anderes. Innerhalb eines <li> darf dagegen fast alles stehen: Text, Links, Bilder – und sogar, wie du gleich sehen wirst, komplette weitere Listen.

Der Browser setzt vor jeden Eintrag ein Aufzählungszeichen und rückt die Liste ein. Wie dieses Zeichen aussieht – Punkt, Kreis, Quadrat oder gar keins –, ist reine Optik und damit später Sache von CSS. Für HTML zählt allein die Aussage: Diese vier Einträge gehören als gleichrangige Gruppe zusammen. Typische Kandidaten für <ul> sind Zutaten, Stichpunkte, Vor- und Nachteile, Linksammlungen – alles, was man in beliebiger Reihenfolge aufzählen könnte.

Ist die Liste dagegen eine Anleitung, zählt jede Position: erst den Ofen vorheizen, dann den Teig hineinschieben – umgekehrt wird das nichts. Für solche Fälle gibt es die geordnete Liste <ol> (ordered list). Sie funktioniert exakt wie <ul> – auch hier stecken alle Einträge in <li>-Elementen –, aber der Browser nummeriert die Einträge automatisch durch.

Das ist praktischer, als es zunächst klingt: Schiebst du später einen Schritt in die Mitte, nummeriert der Browser alles selbstständig um. Wer die Zahlen dagegen von Hand in normale Absätze tippt („1. Ofen vorheizen“), muss bei jeder Änderung alle folgenden Zahlen anfassen – und verschenkt noch mehr: Ein Screenreader erfährt nie, dass diese Absätze zusammengehören. Eine echte Liste kündigt er dagegen an („Liste mit 5 Einträgen“) und lässt seine Nutzerin gezielt von Eintrag zu Eintrag springen.

Ein Detail am Rande: Auch eine Top-10 gehört in ein <ol> – nicht weil man die Einträge abarbeiten müsste, sondern weil hier die Position selbst die Information ist. Platz 1 ist eben nicht Platz 7.

Für geordnete Listen hält HTML drei nützliche Attribute bereit:

• start="6" lässt die Zählung bei 6 beginnen – praktisch, wenn eine Anleitung durch einen Absatz oder ein Bild unterbrochen wird und die zweite Liste nahtlos weiterzählen soll.
• reversed zählt rückwärts – wie gemacht für Countdowns und Ranglisten von Platz 3 hinunter zur Nummer 1.
• type ändert das Zählzeichen: "a"/"A" für Klein- und Großbuchstaben, "i"/"I" für römische Ziffern, "1" (der Standard) für Zahlen. Setze es nur ein, wenn die Zeichen inhaltlich gemeint sind – etwa weil im Text „siehe Aufgabe b“ steht. Geht es nur um die Optik, ist das Sache von CSS.

Alle drei Attribute gibt es nur am <ol> – bei einer ungeordneten Liste wäre eine Startnummer ja bedeutungslos. Du musst sie auch nicht auswendig lernen: Es reicht zu wissen, dass es sie gibt, wenn der Fall eintritt.

Listen dürfen Listen enthalten – so entstehen Gliederungen mit Unterpunkten. Die Regel dafür musst du nur einmal sauber verstehen, dann sitzt sie für immer: Die Unterliste gehört in das <li> ihres Oberpunkts – und zwar vor dessen schließendes </li>. Das ist auch logisch: Die Unterliste ist inhaltlich ein Teil des Oberpunkts. „Obst“ umfasst Äpfel und Birnen:

Experimentiere im Editor: Füge bei der Zubereitung einen Schritt in der Mitte ein und beobachte, wie die Nummerierung automatisch nachrückt. Oder gib der Zutatenliste eine dritte Ebene – der Browser rückt jede Stufe weiter ein und wechselt das Aufzählungszeichen. Übrigens darfst du die Listenarten beim Verschachteln frei mischen: In einem <li> einer <ul> kann eine <ol> stecken und umgekehrt – etwa eine nummerierte Anleitung, deren dritter Schritt eine unsortierte Materialliste enthält.

Die dritte Listenart ist weniger bekannt, aber ungemein praktisch: die Beschreibungsliste <dl> (description list). Sie besteht nicht aus gleichförmigen Punkten, sondern aus Paaren – einem Begriff (<dt>, description term) und seiner Beschreibung (<dd>, description details). Immer wenn deine Inhalte die Form „X: Erklärung zu X“ haben, ist sie das richtige Werkzeug:

• ein Glossar („HTML – die Auszeichnungssprache des Webs“),
• eine FAQ („Frage – Antwort“),
• ein Steckbrief („Rasse – Rauhaardackel“),
• technische Daten („Gewicht – 1,2 kg“).

Dabei ist die Zuordnung flexibel: Ein Begriff darf mehrere Beschreibungen haben (ein <dt>, mehrere <dd>), und mehrere Begriffe dürfen sich eine gemeinsame Beschreibung teilen. Probiere es aus:

Der Browser rückt die Beschreibungen standardmäßig ein – Begriff oben, Erklärung darunter. Kleine Übung: Baue den Steckbrief zu einer Mini-FAQ um – in die <dt>-Elemente kommen Fragen („Was frisst Bello am liebsten?“), in die <dd>-Elemente die Antworten.

Wenn du ab jetzt mit offenen Augen durchs Web gehst, entdeckst du Listen an Stellen, an denen du sie nie vermutet hättest: Das Hauptmenü fast jeder Website ist technisch ein <ul> voller Links – denn genau das ist eine Navigation: eine Sammlung gleichrangiger, zusammengehöriger Verweise. Auch Bildergalerien, Suchergebnisse und Fußzeilen-Menüs sind meist als Listen ausgezeichnet. Wirf testweise einen Blick in die Entwicklerwerkzeuge deines Browsers (Rechtsklick → „Untersuchen“) auf einer beliebigen großen Website: Die Wahrscheinlichkeit ist hoch, dass du im Menü auf ein <ul> triffst. Wie du eine solche Linkliste mit dem Element <nav> zu einer echten, für Screenreader direkt anspringbaren Navigation machst, lernst du in der Lektion zur Semantik.

Genauso wichtig ist der umgekehrte Blick: Nicht alles gehört in eine Liste. Ein Gedankengang, der in ganzen Sätzen fließt, wird nicht besser, wenn man ihn in Aufzählungspunkte zerhackt – im Gegenteil: Die Übergänge und Begründungen zwischen den Sätzen gehen verloren. Die ehrliche Prüffrage lautet: Sind das wirklich gleichartige, parallele Einträge? Dann Liste. Ist es ein zusammenhängender Gedanke? Dann Absätze. Bedenke auch: Screenreader kündigen jede Liste samt Eintragszahl an – wer aus drei zusammenhängenden Sätzen künstlich drei Listenpunkte macht, erzeugt für diese Nutzer nur Lärm ohne Struktur-Gewinn.

Listen ordnen Einträge untereinander – doch manche Daten haben zwei Dimensionen: Zeilen und Spalten. In der nächsten Lektion baust du echte Datentabellen, vom Stundenplan bis zur Preisübersicht.