11 Listen und Aufzählungen in HTML

Listen und Aufzählungen kommen laufend vor. Z.B. wenn du deine Interessen, Freund, Adressen usw. aufzählen willst.

Listen mit Spiegelstrichen in HTML

Jeder Punkt in Auflistung wird von dem HTML-TAG <li> umschlossen. Dabei steht <li> für englische „list item“ = Element der Liste.

Erstellen wir für folgende 3 Aufzählungspunkte eine Liste – stell dir vor, was als Belag deine Pizza soll:

• Schinken

• und ganz viel Käse, also Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse

• Pilze

Es ist wichtig, dass ein Punkt sehr viel Text hat, dass ein Umbruch in der folgenden Zeile erfolgen muss. Was fällt bei dem Text auf?

Er fluchtet bei deinem Ergebnis nicht (im Gegensatz zum oben gezeigten).

Hier lernen wir unseren ersten HTML-TAG kennen, der nicht alleine Vorkommen kann. Es muss noch zusätzlich die Art der Liste definiert werden. Hierfür gibt es den HTML-TAG <ul> – dieser umschließt alle Listenelemente:

Am Beispiel wird es deutlich, wie diese zusammenspielen und welche TAGs wie geschachtelt sein sollten.

<ul>
   <li>Schinken</li>
   <li>und ganz viel Käse, also Käse Käse Käse Käse Käse Käse 
   Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse 
   Käse Käse und nochmals Käse</li>
   <li>Pilze</li>
</ul>

Wenn wir jetzt uns das Ergebnis im Browser ansehen, fluchtet der Text nun untereinander und wenn wie den Quellcode validieren lassen, ist er nun korrekt.

Dabei steht <ul> für das englische „unsorted list“ = unsortierte Liste. Dieser TAG hat zur Folge, dass für jedes <li> ein Spiegelstrich in Form einer Kugel gesetzt wird.

Erstelle die Datei ./liste1.htm. Erstelle das Grundgerüst. Erstelle eine unsortierte Liste mit 7 Einträgen (z.B. Autos, Filme, Schauspieler, usw.)

Und was es als unsortierte List, gibt es auch als sortierte Liste.

Listen mit automatischer Nummerierung

Wenn jetzt eine sortierte Liste (durchnummerierte) benötigt wird, wird das <ul> durch <ol> ersetzt. <ol> steht für englische „orderd list“ = sortierte Liste

Erstelle die Datei ./liste2.htm. Erstelle wie im obigen Beispiel eine Liste, diese soll jetzt aber nummeriert sein.