HTML5-Neuerungen für nummerierte Aufzählungen

Canvas ist großartig, neue semantische Elemente zum Strukturieren des Codes sind endlich hier und dank unzähliger APIs sparen wir uns zukünftig viel Tipparbeit bei Webprojekten. HTML5 ist unumstritten eine tolle Sache. Unter der Spezifikationshaube verstecken sich neben den großen neuen Technologien aber auch einige kleine Neuerungen die eine Erwähnung wert sind. Grund genug diesen versteckten kleinen Änderungen einen Platz zu geben und sie vorzustellen. Heute am Plan: Neue Attribute für nummerierte Aufzählungen.


Allgemeines zu nummerierten Aufzählungen

Das <ol>-Element verwendet man für nummerierte Aufzählungen. In diesem HTML-Element werden die einzelnen Aufzählungspunkte als <li>-Elemente definiert. Bis auf die Verwendung von Klassen und Ids führt ein Großteil der Entwickler, bei diesem Tag, auch keine weiteren Änderungen mehr durch. Als es XHTML noch nicht gab und überall HTML 4.01 verwendet wurde, gab es allerdings Attribute, die, zumindest semantisch gesehen, bei diesem Element verwendet werden durften und nützliche Vorteile boten. Mit HTML5 und der dazugehörigen Spezifikation im Gepäck, dürfen diese wieder benutzt werden. Ein Blick darauf lohnt sich.

Zähler manipulieren mit dem value-Attribut

Mit dem value-Attribut des <li>-Elementes kann die dargestellte Zahl einer Aufzählung manipuliert werden – Egal wo sich das Listenelement befindet. Die weitere Zählung der Elemente wird dadurch nicht beeinflusst. Ein Anwendungsbeispiel wäre die doppelte Notierung zweier Elemente. Die gute Nachricht: Das value-Attribut funktioniert in jedem Browser und kann somit schon heute genutzt werden.

<ol>
    <li>Das ist ein Test</li>
    <li value="1">Und hier möchte ich eine andere Nummer haben</li>
    <li>Hier gehts aber ganz normal weiter</li>
</ol>

Startwert von Listen festlegen

Soll die Liste erst mit einer bestimmten Zahl zu zählen beginnen, gibt es das start-Attribut für <ol>-Elemente. Auch diese Eigenschaft kann schon bedenkenlos in HTML5-Dokumenten verwendet werden.

<ol start="12">
    <li>Zählt ab 12 aufwärts</li>
    <li>Und so weiter...</li>
</ol>

Rückwärts zählen

Wer Listen darstellen möchte, deren Aufzählung rückwärts laufen, kann laut Spezifikation das reversed-Attribut nutzen. Browser-Support gibt es allerdings noch nicht. Sofern man also damit arbeiten mag, muss entweder das value-Attribut oder die Verwendung von JavaScript herhalten.

<ol reversed>
    <li>Diese Zählung läuft rückwärts</li>
    <li>Sofern Browser dies darstellen könnten!</li>
</ol>

Aufzählungstyp definieren

Wer derzeit römische Zahlen bei Listenelementen verwenden möchte, musste auf CSS zurückgreifen. Dieser Ort ist vermutlich, da es sich um die Gestaltung eines Elementes handelt, auch nicht ganz falsch. Gegenargumentiert ist es rein semantisch jedoch nur via CSS zu erkennen, um welche Art der nummerischen Aufzählungen es sich handelt. Zur Deklaration im Markup gibt es nun das type-Attribut für <ol>-Elemente. Möglich sind decimal (Dezimalzahlen), lower-latin (kleingeschriebenes Lat. Alphabet), upper-latin (großgeschriebenes Lat. Alphabet), lower-roman (kleingeschriebene römische Zahlen) und upper-roman (großgeschriebene römische Zahlen). Auch das ging bereits früher und funktioniert somit auch weiterhin problemlos in allen Browsern.

<ol type="lower-roman">
    <li>Kleingeschriebene römische Zahlen sind toll</li>
    <li>Und das ganz ohne CSS</li>
</ol>

Die Ergebnisse aller Beispiele können hier angesehen werden. Unterm Strich können wir ab jetzt (wieder), bzw. baldigst, Dinge mit nummerierten Aufzählungen anstellen, die bisher eher umständlich oder gar nicht zu bewerkstelligen waren. Eine kleine Neuerung also die man kennen und im besten Fall, bereits heute nutzen sollte.