Verwendung

Mit Listen in HTML haben wir die Möglichkeit markante Informationen gesondert darzustellen. Dazu stehen uns zwei Arten von Elementen zur Verfügung: Die geordneten Listen, welche mit Zahlen, Buchstaben oder andere Arten von Aufzählungstypen ausgestattet werden und die ungeordneten Listen, welche lediglich mit einem Quadrat, einem Punkt oder andere Aufzählungstypen ohne Reihenfolge gegliedert werden.

Geordnete Listen

Eine geordnete Liste geben wir mit dem Block-Level Element <ol></ol> an. Der Name "ol" ist eine Abkürzung für "ordered List" und bedeutet "geordnete Liste". Nun brauchen wir noch die Daten unserer Liste. Diese können wir mit dem Element <li></li> angeben, was kurz für "list item" (Listeneintrag).

  • Html
  • Ergebnis
<ol> <li>Erster Listeneintrag</li> <li>Zweiter Listeneintrag</li> <li>Dritter Listeneintrag</li> </ol>

Aufzählungstypen der geordneten Liste

Für geordnete Listen haben wir eine Reihe von Aufzählungstypen, die es uns ermöglichen, unsere Daten übersichtlicher anzeigen zu lassen. Dafür benötigen wir das Attribut type="" mit den folgenden Werten:

  • 1 : Listeneinträge werden mit Zahlen geordnet
  • A : Listeneinträge werden mit Großbuchstaben geordnet
  • a : Listeneinträge werden mit Kleinbuchstaben geordnet
  • I : Listeneinträge werden mit römischer Notation (groß) geordnet
  • i : Listeneinträge werden mit römischer Notation (klein) geordnet
  • Html
  • Ergebnis
<ol type="1"><li>Erster Listeneintrag</li><li>Zweiter Listeneintrag</li></ol> <ol type="A"><li>Erster Listeneintrag</li><li>Zweiter Listeneintrag</li></ol> <ol type="a"><li>Erster Listeneintrag</li><li>Zweiter Listeneintrag</li></ol> <ol type="I"><li>Erster Listeneintrag</li><li>Zweiter Listeneintrag</li></ol> <ol type="i"><li>Erster Listeneintrag</li><li>Zweiter Listeneintrag</li></ol>

Weiterhin können wir mit dem start="" Attribut angeben, ab welcher Zählung die Liste anfangen soll:

  • Html
  • Ergebnis
<ol type="A" start="12"> <li>Zwölfter Listeneintrag</li> <li>Dreizehnter Listeneintrag</li> </ol>

Die obige Liste beginnt mit dem Buchstaben L gefolgt von M, da wir den Startpunkt 12 angegeben haben und "L" der zwölfte Buchstabe im Alphabet ist.

Ungeordnete Listen

Ungeordnete Listen werden wesentlich öfter gebraucht, als geordnete Listen. Oftmals jedoch für Navigationen, Slideshows und andere künstlerische Arten der Webprogrammierung. Hier soll jedoch die einfachste Form ihrer Nutzung gezeigt werden:

  • Html
  • Ergebnis
<ul> <li>Erster Listeneintrag</li> <li>Zweiter Listeneintrag</li> </ul>

Der obere Code zeigt eine ungeordnete Liste, die standardmäßig mit dem Aufzählungstypen disc angezeigt wird. Mit CSS haben wir die Möglichkeit eigene Bilder als Aufzählung einzufügen oder sie komplett wegzulassen. In HTML haben wir folgende Werte, die wir für das type="" Attribut benutzen können:

  • disc : Listeneinträge werden mit einem gefüllten Kreis geordnet
  • circle : Listeneinträge werden mit einem leeren Kreis geordnet
  • square : Listeneinträge werden mit einem Quadrat geordnet
  • Html
  • Ergebnis
<ul type="disc"><li>Erster Listeneintrag</li><li>Zweiter Listeneintrag</li></ul> <ul type="circle"><li>Erster Listeneintrag</li><li>Zweiter Listeneintrag</li></ul> <ul type="square"><li>Erster Listeneintrag</li><li>Zweiter Listeneintrag</li></ul>