Immer wieder werden in Webseiten sogenannte Listen gebraucht. Listen ermöglichen die Gliederung von Texten. Zum Glück gibt es in HTML spezielle Befehle dafür. Es gibt sortierte und unsortierte Listen.
Sortierte Liste
Bei einer sortierten Liste werden die Einträge durchnummeriert. Ein Beispiel:
Schön ist es, dass man die Art der Nummerierung festlegen kann. Es sind arabische, römische und alphanumerische Auflistungen möglich. Der HTML-Code für Listen sieht folgendermaßen aus:
<ol>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
</ol>
Wie Sie mit Sicherheit bereits erkannt haben, werden für Listen zwei Befehle benötigt. Einmal <ol>, damit sagen wir, dass hier eine sortierte Liste (ordered List) beginnt. Die einzelnen Listeneinträge, brauchen jeweils für jeden Eintrag einen eigenen Tag. Dieser heißt li. Für jeden Eintrag in der Liste benötigen Sie also ein Tagpaar (Start- und Schließbefehl) li. Nachdem alle Einträge eingearbeitet sind, wird die gesamte Liste mit </ol> geschlossen. Dieses Beispiel ist eine recht einfache Liste. Die Einträge werden einfach untereinander nummeriert. Komplizierter wird es mit dem nächsten Beispiel.
Sortierte Liste mit Unterpunkten
Wenn Sie eine sortierte Liste aufgegliedert mit Unterpunkten benötigen, müssen Sie die Listen ineinander verschachteln. Also zuerst die erste Liste öffnen, danach die zweite Liste. Geschlossen wird das Ganze wie üblich in der Reihenfolge: Erst die zweite Liste schließen, dann die erste Liste schließen. Theoretisch könnten Sie in der zweiten Liste noch eine dritte öffnen. Schauen wir uns mal den Quellcode dafür an.
<ol>
<li>Listeneintrag 1</li>
<ol>
<li>Listeneintrag 1, Unterpunkt 1</li>
<li>Listeneintrag 1, Unterpunkt 2</li>
</ol>
<li>Listeneintrag 2</li>
</ol>
Dieser Beispielcode erzeugt folgendes:
So könnte man theoretisch noch weitere Unterpunkte hinzufügen. Besonderes Augenmerk richten wir auf die Unterpunkte. Nach dem ersten Listeneintrag <li>Listeneintrag 1</li> öffnen wir mit <ol> unsere Liste mit Unterpunkten. Die einzelnen Listeneinträge werden hier genauso mit dem Befehl li realisiert. Sie sehen, es ist eigentlich gar nicht so schwer. Nach demselben Schema funktioniert das Ganze auch mit unsortierten Listen.
Unsortierte Liste
Wenn Sie eine Durchnummerierung Ihrer Liste nicht wünschen, eignet sich dafür die unsortierte Liste. Bei einer unsortierten Liste werden die einzelnen Einträge nicht durchnummeriert sondern nur mit einem Aufzählungszeichen versehen. Als Beispiel:
Der Quellcode für eine unsortierte Liste sieht folgendermaßen aus:
<ul>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
</ul>
Der Unterschied zur sortierten Liste: Einfach <ul> statt <ol>. Die Listeneinträge werden genauso wie bei der sortierten Liste mit li erzeugt. Die Syntax verhält sich genauso wie bei der sortierten Liste.