Ungeordnete und geordnete (nummerierte) Listen im Browser
Geordnete Listen sind nummerierte Listen und z.B. von Bedeutung, um nacheinander auszuführende Aktionen oder Rangfolgen übersichtlich darzustellen. Bei einer nummerierten Liste werden alle Listeneinträge automatisch durchnummeriert.
Ungeordnete Listen sind reine Aufzählungslisten, z.B. um Produkteigenschaften oder Argumente für eine These übersichtlich darzustellen. Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen (Bullet) versehen.
<h1>Liste wichtiger Reime</h1> <ul> <li>Probieren geht über Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante fällt über Kante</li> </ul> <h1>Todo-Liste</h1> <ol> <li>bei Annette vorbeischauen</li> <li>bei Bianca vorbeischauen</li> <li>bei Christine vorbeischauen</li> </ol>
<ul> leitet eine ungeordnete Liste (Aufzählungsliste) ein (ul = unordered list = unsortierte Liste). Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag. </ul> beendet die Liste.
<ol> leitet eine geordnete (nummerierte) Liste ein (ol = ordered list = nummerierte Liste). Auch hier werden die einzelnen Listenpunkte durch <li>…</li> markiert. </ol> beendet die Liste.
ol- und ul-Elemente dürfen nichts anderes als li-Elemente enthalten. li-Elemente können Text und andere HTML-Elemente enthalten, zum Beispiel Textauszeichnungen (Textlevel-Semantics), Zeilenumbrüche, aber auch Grafik, Video- oder Audio-Controls, Objekte und Formularelemente (Phrasing Content in der Terminologie der HTML-Spezifikation). Nicht erlaubte Inhalte sind andere gruppierende Elemente oder Elemente für Web-Seitenbereiche.
Mit CSS bzw. CSS-Eigenschaften für Listenformatierung können Sie bei ungeordneten Listen die Art des Aufzählungszeichens beeinflussen. Auch eigene Bullet-Grafiken können Sie dabei verwenden. Bei nummerierten Listen können Sie mit CSS die Art der Nummerierung beeinflussen (z.B. römische Ziffern oder Buchstaben).
Das Verschachteln von Listen ist ebenfalls möglich. Dabei ist es jedoch wichtig, die Verschachtelung richtig zu notieren.
<ul> <li>HTML <ul> <li>Kopfdaten</li> <li>Dokumentkörper</li> </ul> </li> <!-- Ende: HTML --> <li>CSS <ul> <li>Selektoren</li> <li>Eigenschaften</li> </ul> </li> <!-- Ende: CSS --> <li>ECMA/JavaScript</li> <li>XML</li> </ul> <ol> <li>Vorbereitung <ol> <li>Zwiebeln schälen</li> <li>Gemüse putzen</li> </ol> </li> <!-- Ende: Vorbereitung --> <li>Zubereitung <ol> <li>Butter in der heißen Pfanne schmelzen lassen</li> <li>Mehl einrühren</li> <li>usw.</li> </ol> </li> <!-- Ende: Zubereitung --> </ol>
Beim Verschachteln ist es wichtig, in der übergeordneten Liste ein öffnendes <li>-Tag zu notieren. Dahinter folgt der Eintragstext dieses Listenelements. Dann wird das Listenelement jedoch noch nicht geschlossen, sondern stattdessen die vollständige untergeordnete Liste notiert. Erst daran anschließend folgt das schließende </li>-Tag des übergeordneten Listeneintrags. Im obigen Beispiel sind zum besseren Verständnis Kommentare wie <!— Ende: HTML —> notiert, um zu demonstrieren, welches schließende </li>-Tag zu welchem Listeneintrag gehört.
Sie können geordnete und ungeordnete Listen auch gemischt verschachteln, also z.B. innerhalb einer geordneten Liste eine untergeordnete ungeordnete Liste notieren.
Auch weitere Verschachtelungstiefen sind möglich. li-Elemente untergeordneter Listen können also selbst wieder Listen enthalten.
Eigenschaften von Listen werden beim Verschachteln vererbt. So etwa die Einrückung. Was leider nicht automatisch funktioniert, ist eine automatische Unternummerierung bei geordneten Listen, also etwa 1.1., 1.2. usw.
Bei geordneten Listen können Sie die Startnummerierung setzen und bei Listenpunkten eine bestimmte Ordnungsnummer erzwingen. Ferner können Sie eine absteigende Nummerierung anstelle einer aufsteigenden bestimmen.
<ol reversed> <li>Henne</li> <li>Ei</li> </ol> <ol start="2"> <li>Henne</li> <li value="1">Ei</li> <li>Hahn</li> </ol>
Mit dem Standalone-Attribut reversed im einleitenden <ol>-Tag einer geordneten Liste weisen Sie an, dass die Listennummerierung absteigend statt aufsteigend erfolgt (reversed = umgekehrt).
Mit dem start-Attribut können Sie, ebenfalls im einleitenden <ol>-Tag, den Startwert der Listennummerierung bestimmen. Bei öffnenden <li>-Tags innerhalb von geordneten Listen ist außerdem die Angabe eines value-Attributs möglich. Damit erzwingen Sie für dieses Listenelemente die zugewiesene Nummer. Die Nummerierung nachfolgender Listenelemente orientiert sich an dem durch value neu gesetzten Wert.
Wenn der Browser alle Attribute kennt, ergeben sich aus dem obigen Beispiel folgende Listen:
2. Henne
1. Ei
2. Henne
1. Ei
2. Hahn
Das reversed-Attribut wurde erst mit HTML5 eingeführt und ist noch nicht verbreitet.
Wenn Sie XHTML-konform arbeiten, notieren Sie das reversed-Attribut in der Form reversed="reversed".
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.