Nummerierte Listen im HTML

HTML-Webseite und die Nummerierte Listen

Nummerierte Listen werden durch die <ol> ... </ol>-Tags eingeschlossen (ol steht für Ordered List, geordnete Liste), und jeder Eintrag in der Liste beginnt mit der <li>- Kennung (li = List Item, Listen-Eintrag).

Auch die <li>-Kennung ist einseitig, das heißt, Sie brauchen keine abschließende Kennung anzugeben. Das Auftreten der nächsten <li>-Kennung (oder der abschließenden </ol>-Kennung) bezeichnet zugleich das Ende des Eintrags in der Liste. In XHTML 1.0 müssen Sie ein abschließendes </li> Tag verwenden.

Wenn der Browser eine geordnete Liste interpretiert, nummeriert er jeden der Einträge fortlaufend (und rückt sie häufig etwas ein). Sie brauchen die Nummerierung also nicht selber durchzuführen, und wenn Sie Einträge hinzufügen oder entfernen, nummeriert der Browser sie neu, sobald er das Dokument erneut lädt.

Geordnete Listen sind Listen, in denen jeder Punkt nummeriert ist.

Verwenden Sie nummerierte Listen nur, wenn Sie deutlich machen wollen, dass die Elemente geordnet sind, das heißt, dass sie in einer bestimmten Reihenfolge auftreten müssen. Wenn Sie nur einige Elemente in beliebiger Reihenfolge auflisten wollen, benutzen Sie stattdessen eine ungeordnete Liste.

Im folgenden Beispiel sehen Sie eine geordnete Liste, die Ihnen Schritt für Schritt zeigt, wie Sie ein neues Betriebssystem installieren müssen. Nachstehende Input- und Output-Angaben zeigen die geordnete Liste. Auf der Abbildung können Sie sehen, wie diese Liste im Safari aussieht.

<p>
	Installing Your New Operating System
</p>
<ol>
	<li>Insert the CD-ROM into your CD-ROM drive.</li>
	<li>Choose RUN.</li>
	<li>Enter the drive letter of your CD-ROM (example: D:\), followed by SETUP.EXE.</li>
	<li>Follow the prompts in the setup program.</li>
	<li>Reboot your computer after all files are installed.</li>
	<li>Cross your fingers.</li>
</ol>

Nummerierte Listen im HTML

Anpassen geordneter Listen in HTML 3.2

HTML 3.2 stellt verschiedene Attribute für geordnete Listen zur Verfügung. Sie werden dazu verwendet, um zu sehen, wie der Browser die Liste wiedergibt. Diese Attribute ermöglichen Ihnen einige Features der geordneten Listen zu kontrollieren. Die geordneten Listen beinhalten ebenfalls das zu verwendende Nummerierungsschema, welches schon vorher festlegt, mit welcher Zahl begonnen werden soll (falls Sie nicht mit 1 beginnen wollen). In HTML 4.0 jedoch sind die, in diesem Abschnitt erwähnten Attribute, zugunsten von Style Sheet-Eigenschaften und -Werten verworfen. Um HTML 3.2 Browser zu unterstützen, werden Sie diese Attribute eventuell noch gebrauchen können.

Sie können bei geordneten Listen im Wesentlichen zwei Dinge anpassen: Zum einen wie diese nummeriert werden und zum anderen, bei welcher Zahl die Nummerierung beginnt. HTML 3.2 verfügt über das type-Attribut. Dieses Attribut kann einen der folgenden fünf Werte annehmen, der festlegt, welche Art der Nummerierung verwendet wird:

• "1": Legt fest, dass arabische Standardziffern zur Nummerierung der Liste verwendet werden sollen (also 1, 2, 3, 4 usw.).
• "a": Legt fest, dass Kleinbuchstaben zur Nummerierung der Liste verwendet werden sollen (sprich a, b, c, d usw.).
• "A": Legt fest, dass Großbuchstaben zur Nummerierung der Liste verwendet werden sollen (A, B, C, D usw.).
• "i": Legt fest, dass kleine römische Ziffern zur Nummerierung der Liste verwendet werden sollen (i, ii, iii, iv usw.).
• "I": Legt fest, dass große römische Ziffern zur Nummerierung der Liste verwendet werden sollen (I, II, III, IV usw.).

Die Art der Nummerierung kann im <ol>-Tag wie folgt festgelegt werden: <ol type="a">. Standardmäßig wird type="1" verwendet.

Das angenehme an Web-Browsern ist, dass sie im Allgemeinen Attribute, die sie nicht verstehen, ignorieren. Wenn ein Browser zum Beispiel das type-Atribute des <ol>-Tag nicht unterstützt, wird er es einfach ignorieren, sobald er darauf stößt.

Nehmen Sie die folgende Liste als Beispiel:

<p>
	The Days of the Week in French:
</p>
<ol>
	<li>Lundi</li>
	<li>Mardi</li>
	<li>Mercredi</li>
	<li>Jeudi</li>
	<li>Vendredi</li>
	<li>Samedi</li>
	<li>Dimanche</li>
</ol>

Nummerierte Listen im HTML

Würden Sie, wie im Folgenden geschehen, das Attribut type="I" dem <ol>-Tag hinzufügen, dann würde die Liste in älterem Browsern wie in der Abbildung dargestellt werden.

<p>
	The Days of the Week in French:
</p>
<ol type="I">
	<li>Lundi</li>
	<li>Mardi</li>
	<li>Mercredi</li>
	<li>Jeudi</li>
	<li>Vendredi</li>
	<li>Samedi</li>
	<li>Dimanche</li>
</ol>

Nummerierte Listen im HTML

Das type-Attribut kann auch im <li>-Tag verwendet werden. Dadurch erreicht man einen Wechsel in der Art der Nummerierung innerhalb der Liste. Wird das type-Attribut mit dem <li>-Tag verwendet, so wirkt es sich auf den fraglichen Eintrag und alle darauffolgenden in der Liste aus.

Durch die Verwendung eines anderen Attributs - start - können Sie festlegen, mit welcher Zahl bzw. mit welchem Buchstaben die Nummerierung Ihrer Liste beginnt. Die Standard-Startposition ist natürlich die 1. <ol start=4> würde zum Beispiel dafür sorgen, dass die Liste bei Nummer 4 beginnt. Wohingegen <ol type="a" start=3> dafür sorgen würde, dass die Liste bei c beginnt und von dort im Alphabet fortfährt.

Sie können zum Beispiel die letzten 6 Monate des Jahres auflisten und bei der Nummerierung mit der römischen Zahl VII beginnen. In der Abbildung sehen Sie das Ergebnis.

<p>
	The Last Six Months of the Year:
</p>
<ol type="i" start="7">
	<li>July</li>
	<li>August</li>
	<li>September</li>
	<li>October</li>
	<li>November</li>
	<li>Dezember</li>
</ol>

Nummerierte Listen im HTML

Wie auch mit dem type-Attribute können Sie an jedem Punkt einer Liste die Nummer eines Eintrags ändern. Dies erreichen Sie über das value-Attribut des <li>-Tag. Die Nummerierung wird beginnend mit dem angegebenen Wert bei dem betroffenen Eintrag neu gestartet.

Was wäre zum Beispiel wenn die letzten drei Einträge in der Liste der Zutaten von oben anstatt der Nummern 6, 7, 8 die Nummern 10, 11, 12 haben sollten? Sie können die Nummerierung bei dem Eintrag Eggs über das value-Attribut entsprechend zurücksetzen:

<p>
	Cheescake ingredients:
</p>
<ol type="i">
	<li>Quark Cheese</li>
	<li>Honey</li>
	<li>Cocoa</li>
	<li>Vanilla Extract</li>
	<li>Flour</li>
	<li value=10>Eggs</li>
	<li>Walnuts</li>
	<li>Margarine</li>
</ol>

Nummerierte Listen im HTML