HTML5: Listen

In (X)HTML gibt es auch die Möglichkeit, Aufzählungen aller Art zu erzeugen. Dazu stehen drei verschiedene Arten von Aufzählungstypen zur Verfügung.

Einmal gibt es die sogenannte 'ungeordnete Liste' (englisch: 'unordered list'). Damit wird eine Aufzählung bezeichnet, bei der die Reihenfolge, in der die Aufzählungspunkte angegeben sind, inhaltlich keine Rolle spielt. Beispielsweise kann mit diesen Typ eine Zutatenliste oder ein Quellenverzeichnis erzeugt werden.

Dann gibt es eine 'geordnete Liste' (englisch: 'ordered list'). Wie der Name schon sagt, ist die Reihenfolge, in der die Aufzählungspunkte angegeben sind, inhaltlich relevant. Um im Bild zu bleiben, könnte die Kochanleitung für ein Gericht mit einer solchen Liste ausgezeichnet werden.

Der dritte Typ der Aufzählungen ist eine sogenannte 'Definitionsliste' (englisch: 'definition list'). Eine Definitionsliste wird verwendet, wenn eine Zuordnung zwischen einem Wort oder einem Satz und einer Beschreibung umgesetzt werden soll. Hier speziell könnten mit einer Definitionsliste Kochbegriffe wie 'ablöschen' oder 'dünsten' erklärt werden. Ein Glossar ist eine weitere typische Anwendung für eine Definitionsliste.

Die drei Listentypen können miteinander kombiniert/verschachtelt werden.

(X)HTML stellt also nur sehr grundlegende Strukturen für Listen bereit und geht nicht näher auf die inhaltliche Bedeutung von Listen ein, die stark unterschiedlich sein können, was konventionell über die Darstellung oder durch Überschriften geregelt wird. Eine weitere Differenzierung, um was für eine Art von Liste es sich inhaltlich handelt, kann der Autor also mit (X)HTML allein nicht vornehmen. Bei Verwendung der Erweiterung RDFa kann er aber natürlich Metainformation darüber liefern, welche inhaltliche Funktion die jeweilige Liste speziell hat, indem auf eine entsprechende Definition verwiesen wird.

Vom Inhaltsmodell her sind die Listenelemente ul für ungeordnete Listen, ol für geordnete Listen, dl für Definitionslisten Blockelemente mit einer speziellen Gruppierungsfunktion.

Sie können notiert werden, wo fließender Inhalt notiert werden kann. Inhaltlich sinnvoll sind sie dort zu verwenden, wo auch die Geschwisterelemente Blockelemente sind.

Der mögliche Inhalt ist jeweils speziell, wird bei jedem der Elemente einzeln erläutert.

Ungeordnete Liste ul

Eine ungeordnete Liste wird mit dem Element ul angelegt. Ungeordnet bedeutet in diesem Zusammenhang, daß die gewählte Reihenfolge inhaltlich nicht relevant ist.

Dieses Element darf nur die Elemente li enthalten, (wobei li für englisch 'list item' steht).

ul sollte mindestens ein Element li enthalten.

In den älteren Sprachversionen hat ul auch noch Attribute, die als veraltet gelten und daher hier nicht weiter diskutiert werden. Diese dienten dazu, die Art der Darstellung zu steuern, wozu heute stattdessen CSS verwendet werden kann.

Beispiel:

<ul>
    <li>1l Milch</li>
    <li>300g Butter</li>
    <li>2 Eßlöffel Zucker</li>
</ul>

Dies wird zum Beispiel wie folgt dargestellt:

1l Milch
300g Butter
2 Eßlöffel Zucker

Soll ein Punkt weiter untergliedert werden, so wird verschachtelt. Das heißt, es muß in dem Listenpunkt li, der untergliedert wird, wieder das Element ul mit li darin verwendet werden. Im folgenden Beispiel wird die Milch weiter untergliedert. Weil ul ein Blockelement ist, wird im Sinne einer guten Struktur auch die Milch als Oberbegriff in ein Blockelement gesteckt. Allerdings soll die Milch nicht gegenüber den weiteren Listenpunkten gleicher Stufe hervorgehoben werden, weswegen das generische Blockelement div verwendet wird.

<ul>
    <li>
       <div>1l Milch</div>
       <ul>
        <li>0.5l Kuhmilch</li>
        <li>0.5l Ziegenmilch</li>
       </ul>
    </li>
    <li>300g Butter</li>
    <li>2 Eßlöffel Zucker</li>
</ul>

Dies wird zum Beispiel wie folgt dargestellt:

1l Milch
- 0.5l Kuhmilch
- 0.5l Ziegenmilch
300g Butter
2 Eßlöffel Zucker

Geordnete Liste ol

Geordnete Listen sind numerierte Listen und werden mit dem Element ol ausgezeichnet. Anders als bei ul ist bei ol also relevant, in welcher Reihenfolge die Kindelemente li notiert sind.

Dieses Element darf nur die Elemente li enthalten, (wobei li für englisch 'list item' steht). Innerhalb vom li kann fließender Inhalt stehen. Im Sinne einer guten Struktur sollten aber entweder nur Blockelemente oder Phraseninhalt verwendet werden.

ul sollte mindestens ein Element li enthalten.

Mit dem Attribut reversed kann bewirkt werden, daß die Aufzählung absteigend erfolgt, also von groß zuerst nach klein zuletzt, fehlt das Attribut, erfolgt sie aufsteigend, also von klein zuerst bis groß zuletzt. Der Wert von reversed ist immer leer oder 'reversed'.

Mit dem Attribut type kann notiert werden, welcher Aufzählungstyp gewählt werden soll. Mögliche Werte von type und womit die Aufzählung erfolgt:

1: Dezimalzahlen
a: kleine, lateinische Buchstaben
A: große, lateinische Buchstaben
i: kleine Buchstabenfolgen, die römische Zahlen repräsentieren
I: große Buchstabenfolgen, die römische Zahlen repräsentieren

Sofern römische Zahlen gewählt werden, kann es bei Werten kleiner als 1 natürlich Probleme geben, bei den Buchstaben natürlich, wenn es mehr Listenpunkte gibt als es Buchstaben gibt.

Mit dem Attribut start kann ein Startwert notiert werden, mit welchem die Zählung begonnen wird. Der Wert ist eine ganze Zahl. Fehlt das Attribut, ist es leer oder sonstwie der Wert ungültig, wird 1 als Wert angenommen.

In den älteren Sprachversionen hat ol auch noch weitere Attribute, die als veraltet gelten und daher hier nicht weiter diskutiert werden. Diese dienten dazu, die Art der Darstellung zu steuern, wozu heute stattdessen CSS verwendet werden kann.

Beispiel:

<ol>
    <li>Milch in einer Schüssel schlagen</li>
    <li>Butter mit der Milch zusammenmischen</li>
    <li>Zucker hinzugeben</li>
</ol>

Diese fiktive Kochanleitung wird zum Beispiel wie folgt dargestellt:

Milch in einer Schüssel schlagen
Butter mit der Milch zusammenmischen
Zucker hinzugeben

Beispiel mit Buchstaben als Aufzählungsmerkmale, begonnen wird bei 3 (warum auch immer):

<ol type="A" start="3">
    <li><div>Milch in einer Schüssel schlagen</div>
        <ol type="a">
           <li>Die Milch für 5 Minuten in den Kühlschrank stellen</li>
           <li>Anschließend aus dem Kühlschrank herausnehmen</li>
        </ol>
    </li>
    <li>Butter mit der Milch zusammenmischen</li>
    <li>Zucker hinzugeben</li>
</ol>

Dies wird zum Beispiel wie folgt dargestellt:

Milch in einer Schüssel schlagen
1. Die Milch für 5 Minuten in den Kühlschrank stellen
2. Anschließend aus dem Kühlschrank herausnehmen
Butter mit der Milch zusammenmischen
Zucker hinzugeben

Listenpunkt li

Das Element kennzeichnet einen Listenpunkt in geordneten oder ungeordneten Listen. Es kann innerhalb von ul und ol notiert werden.

Innerhalb vom li kann fließender Inhalt stehen. Im Sinne einer guten Struktur sollten aber entweder nur Blockelemente oder Phraseninhalt verwendet werden.

Sofern li innerhalb von ol steht, kann es das Attribut value haben. Der Wert von value ist eine ganze Zahl und repräsentiert, welchen Aufzählungswert der Listenpunkt hat.

Beispiel:

<figure>
<figcaption>Meine Eissorten-Rangliste</figcaption>
<p>Ich mag besonders die Fruchtsorten:</p>
<ol>
<li>Himbeer</li>
<li>Kirsche</li>
<li>Maracuja</li>
<li>Zitrone</li>
<li>Orange</li>
</ol>
<p>Ich mag ferner auch folgende Eissorten:</p>
<ol>
<li value="6">Schokolade</li>
<li>Walnuß</li>
<li>Karamell</li>
<li>Kaffee</li>
<li>Erdnuß</li>
</ol>
</figure>

Das bewirkt hier folglich, daß die Zählung der ersten Liste in der zweiten fortgeführt wird (Anmerkung: das wiki-System erkennt offenbar die Elemente figure und figcaption nicht, ist also selbst nicht HTML5-tauglich, erzeugt allerdings eine Ausgabe mit der Anmutung von HTML5 ;o):

<figure> <figcaption>Meine Eissorten-Rangliste</figcaption>

Ich mag besonders die Fruchtsorten:

Himbeer
Kirsche
Maracuja
Zitrone
Orange

Ich mag ferner auch folgende Eissorten:

Schokolade
Walnuß
Karamell
Kaffee
Erdnuß

</figure>

Definitionsliste dl, dt, dd

Für die Definitionsliste gibt es besondere Elemente, die Elemente der geordneten und ungeordneten Listen können nicht verwendet werden.

Eine Definitionsliste wird mit dem Element dl ausgezeichnet. Dieses Element hat für seinen Inhalt zwei mögliche Modelle:

Im ersten Fall kann das Element nur die beiden Elemente dt (von 'definition term') und dd (von 'definition description') enthalten. Mit dem dt-Element zeichnet man den Begriff aus, den man mit dem dd-Element beschreiben möchte. In HTML5 soll immer mindestens ein dt notiert sein, bevor dd notiert sind, in älteren Versionen war auch eine andere Anordnung möglich. Der Inhalt von dt und dd ist fließender Inhalt, im Sinne einer guten Struktur entscheidet man sich allerdings, ob man nur Blockelemente verwendet oder nur Phraseninhalt. In älteren, strikten Versionen ist für dt nur Phraseninhalt erlaubt. Auch in HTML5 soll dt allerdings keine Gruppierungselemente enthalten, ebensowenig header, footer oder Überschriften h1 bis h6.

Bei diesem Inhaltsmodell muß dl mindestens ein Element dt und dd enthalten. Zudem wird im Regelfalle genau ein dt vor dem zugehörigen dd notiert. Es können auch jeweils mehrere dt oder dd aufeinander folgen, wenn mehrere Begriffe mit der gleichen Definition versehen werden sollen oder es umgekehrt mehrere alternative Erklärungen für einen Begriff gibt.

Ob die Reihenfolge der Listenpunkte eine Rolle spielt, einmal abgesehen davon, daß zumeist auf dt dd folgt und dann die nächste Gruppe dt und dd, ist nicht weiter festgelegt und kann von Einzelfall zu Einzelfall verschieden sein.

Beispiel:

<dl>
    <dt>ablöschen</dt>
    <dd>Hier wird ...</dd>
    <dt>dünsten</dt>
    <dd>Hierbei wird ...</dd>
</dl>

Diese wird zum Beispiel wie folgt dargestellt:

ablöschen: Hier wird ...
dünsten: Hierbei wird ...

Im alternativen, in HTML5 neu eingeführten Inhaltsmodell kann dl alternativ auch ein oder mehrere Element div als einzige Kinder haben. In diesem Falle dienen die Elemente div lediglich der Gruppierung. Das Inhaltsmodell einer solchen Gruppe div entspricht dem des dl.

Beispiel:

<dl>
 <div>
    <dt>dünsten</dt>
    <dd>Hierbei wird ...</dd>
    <dt>braten</dt>
    <dd>Hierbei wird ...</dd>
    <dt>grillen</dt>
    <dd>Hierbei wird ...</dd>
    <dt>blanchieren</dt>
    <dd>Hierbei wird ...</dd>
    <dt>flambieren</dt>
    <dd>Hierbei wird ...</dd>
 </div>
<div>
    <dt>ablöschen</dt>
    <dd>Hier wird ...</dd>
    <dt>abkühlen</dt>
    <dd>Hier wird ...</dd>
    <dt>verdunsten</dt>
    <dd>Hier wird ...</dd>
    <dt>einfrieren</dt>
    <dd>Hier wird ...</dd>
    <dt>schockfrosten</dt>
    <dd>Hier wird ...</dd>
</div>
</dl>

Weil div typisch vom umgebenden Inhalt nicht besonders abgesetzt wird, ist keine besondere sichtbare Strukturierung zu erwarten, für welche eine eigene Stilvorlage notwendig ist.

dünsten: Hierbei wird ...
braten: Hierbei wird ...
grillen: Hierbei wird ...
blanchieren: Hierbei wird ...
flambieren: Hierbei wird ...
ablöschen: Hier wird ...
abkühlen: Hier wird ...
verdunsten: Hier wird ...
einfrieren: Hier wird ...
schockfrosten: Hier wird ...

In den älteren Sprachversionen hat dl auch noch Attribute, die als veraltet gelten und daher hier nicht weiter diskutiert werden. Diese dienten dazu, die Art der Darstellung zu steuern, wozu heute stattdessen CSS verwendet werden kann.

Zurück zu Zitate |

Hoch zum Inhaltsverzeichnis |

Vor zu Verweise