HTML-Listen

Sehr häufig benötigt man in einem Text eine Aufzählung. Will man diese nun strukturiert und übersichtlich für den Leser darstellen, so verwendet man häufig eine Darstellungsform, die wir in HTML als Listendarstellung bezeichnen. Durch das Ausstatten der einzelnen Aufzählungspunkte, im folgendem auch Listeneinträge genannt, mit einem numerischen oder alphabetischen ansteigenden Wert gestalten Sie ihren Text nicht nur übersichtlicher. Es ergibt sich Ihnen zusätzlich die Möglichkeit auch zu einem späteren Zeitpunkt ohne Probleme auf einen Aufzählungspunkt zu verweisen. Beginnen wir mit einem einfachen Listenbeispiel. Betrachten wir hierfür folgendes Code-Fragment:


Unser Code-Schnipsel repräsentiert bereits eine kleine aber vollständige Liste. In diesem Fall handelt es sich um eine Definitionsliste. Die <dl>-Tags erstellen den Rumpf einer solchen Liste. Während wir mit dem <dt>-Tag den Begriffsteil einer Definitionsliste kennzeichnen, steht der <dd>-Tag für den Definitionsabschnitt eines Eintrages. Häufig werden von <dd> und <dt> die End-Tags weggelassen. Diese sollten jedoch nicht fehlen, wenn Sie Stylesheets verwenden.
Im Allgemeinen werden Sie jedoch andere Listentypen verwenden. Hierbei unterscheiden wir zwischen zwei grundlegenden Listentypen. Besitzen unsere Listeneinträge keine Nummerierung, so reden wir von ungeordneten Listen. In Falle einer Nummerierung bezeichnen wir die Liste als geordnet. Betrachten wir zunächst eine ungeordnete Liste:


Ungeordnete Listen werden mit dem <ul>-Tag definiert. Jeder Listeneintrag wird mit dem <li>-Tag umschlossen. Mit Hilfe der Anweisung „type“ innerhalb der Listendefinition bestimmen Sie das zu jedem Listeneintrag vorangestellte (Bullet-) Zeichen. Dies Zeichen besteht entweder aus einem gefüllten Kreis (value=“disc“), einem Kreis (value=“circle“) oder aber einem Rechteck (value=“square“).
Auch geordnete Listen bieten dem Benutzer eine Anweisung „type“ an. In diesem Falle definiert die Anweisung jedoch den Aufzählungstyp. Des Weiteren können wir mit Hilfe eines zweiten Attributs den Startwert festlegen. Geordnete Listen beginnen mit dem <ol>-Tag:


Unser Code-Schnipsel besitzt als Listentyp eine „1”, also einen numerischen Wert. Als Startwert unserer Aufzählung legen wir die Zahl „10“ fest. Unser Listenelement „Eintrag 1“ wird somit die Zahl 10 vorangestellt. Das Element „Eintrag 2“ beginnt demzufolge mit der Zahl 11. Diese Zahlenfolge setzt sich für alle unsere Listeneinträge fort. Die Anweisung „type“ kann mit einigen weiteren Nummerierungssystemen umgehen. So können wir beispielsweise die römischen Zahlen verwenden:


Neben den hier verwendeten großen römischen Zahlen stehen Ihnen ebenso die kleinen römischen Zahlen zur Verfügung. Geben Sie hierfür einfach das kleine „i“ in der „value“-Anweisung an. Des Weiteren können Sie durch die Angabe des Buchstabens „A“ je nach Groß- oder Kleinschreibung die Groß- bzw. Kleinbuchstaben als Nummerierungssystem verwenden.
Kombinieren Sie bei Bedarf die verschiedene Typen von geordneten und ungeordneten Listen miteinander um somit verschachtelte Listen zu realisieren. Ein Beispiel hierfür sowie zu allen anderen vorgestellten Listentypen können Sie der Beispieldatei entnehmen.

Beispieldatei herunterladen [download=HTML-Listen.zip]