Listen

Listen ermöglichen eine einfache und strukturierte Art Informationen oder Begriffe zu sammeln und aufzulisten. HTML bietet 3 verschiedene Listen an, welche wir uns in diesem Thema genauer anschauen wollen.

Aufzählungslisten

Eine Aufzählungsliste ist der einfachste, jedoch auch meist genutzte, Typ von Listen. Eine Liste wird in HTML mit dem ul-Element (unordered list) definiert. Um dieser Liste nun noch Listenpunkte hinzuzufügen, gibt es das ebenfalls zweiteilige Element li, welches innerhalb der ul-Tags notiert wird. Innerhalb der li-Tags wird der anzuzeigende Text angegeben. Eine Aufzählungsliste ist meist um 40px eingerückt (links) und enthält standardmäßig einen gefüllten Kreis für die einzelnen Punkte als Aufzählungszeichen. Diese Voreinstellungen können mittels CSS geändert werden.

<ul>
	<li>Frühstück</li>
	<li>Mittagessen</li>
	<li>Kaffeetrinken</li>
	<li>Abendessen</li>
</ul>

Nummerierte Listen

Nummerierte Listen sind vom Grundaufbau mit Aufzählungslisten zu vergleichen, jedoch besitzen nummerierte Listen keinen Aufzählungspunkt, sondern eine Nummer, einen Buchstaben oder ein römisches Zeichen. Auf Grund dieses Unterschieds wird hier nicht das ul-Element, sondern das ol-Element (ordered list) verwendet. Die li-Elemente werden hier ebenfalls benötigt.

Standardmäßig werden nummerierte Listen mit Nummern als Aufzählungszeichen angezeigt. Um dies zu ändern, gibt es das Attribut type. Mögliche Werte sind: 1 (Nummern), A (Großbuchstaben), a (Kleinbuchstaben), I (große römische Zeichen) und i (kleine römische Zeichen). Um den Startwert der nummerierten Liste zu ändern, gibt es das Attribut start. Mit Hilfe des Attributs reversed und dem Wert reversed können wir die Nummerierung umdrehen (absteigend sortiert).

<ol>
	<li>Frühstück</li>
	<li>Mittagessen</li>
	<li>Kaffeetrinken</li>
	<li>Abendessen</li>
</ol>

<ol start="5">
	<li>Frühstück</li>
	<li>Mittagessen</li>
	<li>Kaffeetrinken</li>
	<li>Abendessen</li>
</ol>

<ol reversed="reversed">
	<li>Frühstück</li>
	<li>Mittagessen</li>
	<li>Kaffeetrinken</li>
	<li>Abendessen</li>
</ol>

<ol type="a">
	<li>Frühstück</li>
	<li>Mittagessen</li>
	<li>Kaffeetrinken</li>
	<li>Abendessen</li>
</ol>

Beschreibungslisten

Beschreibungslisten sind der 3. Typ von Listen, welche vom Aufbau etwas anders sind als die zwei vorherigen. Beschreibungslisten werden über das dl-Element (description list) definiert. In diesem werden nun dt-Elemente (description term) und dd-Elemente (description data) untergeordnet. dt-Elemente stellen den zu erläuternden Begriff dar, wo hingegen der Inhalt im dd-Element die Beschreibung des zu erläuternden Begriffs enthält. dd-Elemente werden hierbei von Browsern mit 40px Abstand zur linken Seite angezeigt. dt- und dd-Elemente werden im Webbrowser untereinander angezeigt. Geeignet sind solche Listen z. B. für Glossare oder Formelsammlungen.

<dl>
	<dt>HTML</dt>
	<dd>HyperText Markup Language</dd>
	<dt>CSS</dt>
	<dd>Cascading Style Sheet</dd>
	<dt>PHP</dt>
	<dd>PHP Hypertext Processor</dd>
	<dt>ASP</dt>
	<dd>Active Server Pages</dd>
</dl>