HTML/Tutorials/Listen/Aufzählungslisten

20min

leicht

Grundkenntnisse in
• HTML
• CSS

Es gibt zwei Arten von Aufzählungslisten, sortierte und unsortierte. Sie unterscheiden sich nur durch den Namen des Elternelements und können miteinander kombiert werden:

ul

Das Element ul, unordered list (englisch für ungeordnete, unsortierte Liste), beschreibt eine Liste, bei der die Reihenfolge der Elemente nur eine untergeordnete oder keine Rolle spielt.

Aufzählungslisten sind z. B. von Bedeutung, um Produkteigenschaften oder Argumente für eine These übersichtlich darzustellen. Bei einer Aufzählungsliste werden die Listeneinträge von grafischen Browsern standardmäßig mit einem Aufzählungszeichen (Bullet) versehen. Aufzählungslisten eignen sich sehr gut, um Navigationsleisten in Webseiten zu strukturieren.

Beispiele für ul und ol ansehen …

<ul> <li>Probieren geht über Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante fällt über Kante</li> </ul>

<ul> leitet eine Aufzählungsliste ein.

Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag).

</li> beendet den Listeneintrag, </ul> die Liste.

Wie das Aufzählungszeichen (Bullet) dargestellt wird, bestimmt dabei der Browser. Dessen Darstellung kann jedoch mit list-style-type beeinflusst werden.

Listen verschachteln

Das Verschachteln von Listen ist ebenfalls möglich. Zwischen <li> und </li> darf eine komplette weitere Liste stehen. Auch andere Listentypen sind dabei erlaubt.

verschachtelte Liste ansehen …

<ul> <li>Suchmaschinen <ul> <li>Google</li> <li>Bing</li> <li>Ask.com</li> </ul> </li> <li>Verzeichnisse <ul> <li>Yahoo</li> <li>Web.de</li> <li>DMOZ</li> </ul> </li> <li>Was anderes</li> <li>Noch was anderes</li> </ul> </body> </html>

Nach dem Text „Suchmaschinen“ sowie „Verzeichnisse“ wird das begonnene  <li>  zunächst nicht geschlossen. Stattdessen folgen unmittelbar die inneren Listen (grün dargestellt). Erst danach kommt das schließende  </li> .

ol

Das Element ol, ordered list (englisch für geordnete, sortierte Liste), bezeichnet eine Liste, bei der die Reihenfolge der Elemente von Bedeutung ist.

sortierte Liste ansehen …

<ol> <li>bei Anette vorbeischauen</li> <li>bei Bert vorbeischauen</li> <li>bei Christine vorbeischauen</li> <li>bei Dieter vorbeischauen</li> </ol>

Beachten Sie: Das Verschachteln von nummerierten Listen ist ebenfalls möglich, bewirkt aber keine Gesamtnummerierung. Automatische Nummerierungshierarchien wie 1, 1.1, 1.1.1, sind mit HTML allein nicht möglich. Dazu bedarf es der Unterstützung von CSS (siehe Listen mit hybrider Nummerierung formatieren).

Nummerierung beeinflussen

Sie können den Startwert einer Liste festlegen und bei einem beliebigen Listenelement neu setzen. Dazu nutzen Sie das Attribut start des ol-Elementes. Erlaubte Werte für dieses Attribut sind ganze Zahlen. Um die Nummerierung in der Liste zu ändern, verwenden Sie das Attribut value im li-Element.

Listen individuell zählen lassen /veränderte Startwerte für die Zählung ansehen …

<h2>Startwert einer Liste setzen</h2> <ol start="3"> <li>Schweiz</li> <li>Österreich</li> <li>Liechtenstein</li> </ol> <h2>Nummerierung des Listenelementes setzen</h2> <ol start="17"> <li>Siebzehn</li> <li>und</li> <li value="4">Vier</li> <li>Wer gewinnt?</li> </ol>

Die erste Liste beginnt bei 3 an zu zählen. Die zweite Liste fängt bei 17 an, das zweite Element zählt normal weiter (18). Beim dritten Element geht es mit 4 weiter, da das value-Attribut des li-Elementes gesetzt ist, das vierte Element zählt wieder um eins hoch.

Beachten Sie: Die hier beschriebenen Attribute wurden mit HTML 3.2 eingeführt, HTML 4.01 kennzeichnete sie als veraltet - was mit HTML5 wieder rückgängig gemacht wurde.

Zählrichtung umkehren

HTML5 ermöglicht es zusätzlich, die Zählrichtung umzukehren wie bei der Bekanntgabe von Gewinnern bei einer Verlosung häufig praktiziert. Für den Startwert wird das start-Attribut des ol-Elementes genutzt, das Rückwärtszählen durch das Attribut reversed veranlasst.

Es kann dabei auf folgende Weise angegeben werden:

• reversed="reversed"
• reversed=""
• reversed

Siegerliste - Listen abwärts zählen lassen ansehen …

<ol start="3" reversed="reversed"> <li>Dreirad</li> <li>Fahrrad</li> <li>Motorrad</li> </ol>

Die Nummerierung beginnt mit 3 und endet bei 1.

• Listen(Übersicht)
• Gestaltung mit CSS

Weblinks

• css-tricks: Ordered Lists with Unicode Symbols