Keine Last mit der Liste

Listen dienen der schnellen Übersicht, dem leichten Erkennen. Doch wie geht das mit HTML?

Eigentlich ist das Anlegen von Listen unter HTML nicht weiter schwer. Es sind dafür nur wenige logisch klingende Befehle (=Tags) notwendig, wie die folgenden Beispiele verdeutlichen.

Unnummerierte Liste
Um eine Liste nur mit Listenpunkten (Bullets) zu erstellen, beginnt man mit dem <ul> (=unnummerierte Liste)-Tag. Den einzelnen Listenpunkten setzt man das <li>-Tag voraus und schließt es wieder. <li> steht für »List item« und kann einfach mit »Liste« übersetzt werden. Beendet wird die Liste dann wieder mit dem Tag »Liste schließen« </ul>

Beispiel:

<ul>
<li> Rosen </li>
<li> Tulpen </li>
<li> Nelken </li>
</ul>

Ausgabe:

• Rosen
• Tulpen
• Nelken

Nummerierte Listen
Eine nummerierte Liste wird von <ol> und </ol> eingeschlossen. <ol> steht für »ordered list«, was soviel wie »geordnete Liste« heißt. Ansonsten sind sie den unnummerierten Listen gleich.

Beispiel:

<ol>
<li>Begrüßung </li>
<li>Einführung </li>
<li>Details </li>
<ol>

Ausgabe:

1. Bergrüßung
2. Einführung
3. Details

Verschachtelte Listen
Listen können auch unter HTML verschachtelt werden. Es können sowohl nummerierte als auch unnummerierte Listen verschachtelt werden. Jede »Unterliste« wird für sich von <ul> oder <ol> eingeschlossen. Die gesamte Liste wird ebenfalls von diesen Tags eingeschlossen. Auch hierfür ein Beispiel:

<ul>
<li> Städte in Schleswig-Holstein: </li>
<ul>
<li> Flensburg </li>
<li> Kiel </li>
<li> Lübeck </li>
</ul>
<li> Städte in Niedersachsen: </li>
<ul>
<li> Aurich </li>
<li> Hannover </li>
<li> Oldenburg </li>
</ul>
</ul>

Ausgabe:

• Städte in Schleswig-Holstein:
  • Flensburg
  • Kiel
  • Lübeck
• Städte in Niedersachsen:
  • Aurich
  • Hannover
  • Oldenburg

Artikel, die Sie auch interessieren könnten:

Trickkiste - Farbige Listenzeichen
Bunte Listenzeichen lassen sich vielfältig und flexibel durch Sonderzeichen darstellen.