Geordnete und ungeordnete Listen im HTML5
Nummerierte und Aufzählungslisten im HTML5
Zu diesem Thema Ungeordnete Listen existiert noch folgender Artikel: Ungeordnete Listen im HTML.
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.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<ul>
<li>HTML5 bietet neue Elemente für die Definition der Struktur einer Website.</li>
<li>HTML5 ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt.</li>
<li>Wir beginnen mit einem kurzen Überblick über HTML5.</li>
</ul>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<ol>
<li>HTML5 bietet neue Elemente für die Definition der Struktur einer Website.</li>
<li>HTML5 ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt.</li>
<li>Wir beginnen mit einem kurzen Überblick über HTML5.</li>
</ol>
</body>
</html>
Info
<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 Elemente für Webseitenbereiche (Sectioning).
Info
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).
Geordnete Listen kontrollieren
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.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<ol reversed>
<li>HTML</li>
<li>HTML5</li>
</ol>
<ol start="2">
<li>HTML</li>
<li value="1">HTML5</li>
<li>CSS</li>
</ol>
</body>
</html>
Info
Mit dem Standalone-Attribut reversed (reversed = umgekehrt) im einleitenden <ol>- Tag einer geordneten Liste weisen Sie an, dass die Listennummerierung absteigend statt aufsteigend erfolgt.
Mit dem start-Attribut können Sie, ebenfalls im einleitenden <ol>-Tag, den Startwert der Listennummerierung bestimmen. Bei öffnenden <li>-Tags innerhalb von geordnegten Listen ist außerdem die Angabe eines value-Attributs möglich. Damit erzwingen Sie für diese Listenelemente die zugewiesene Nummer. Die Nummerierung nachfolgender Listenelemente orientiert sich an dem durch value neu gesetzten Wert.
Info
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".