Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


Listen in HTML

Ein gewöhnliches Web-Layout kommt nicht ohne Listen aus. Da HTML-Elemente gemäss ihrer Bedeutung eingesetzt werden sollen, soll auch wirklich alles, was in irgend einer Form aufzählender Natur ist, mit Listen umgesetzt werden. Das sind natürlich die gewöhnlichen Listen im Text, aber eben auch die Navigation (Aufzählung aller Seiten und Unterseiten) oder gar ein Stapel Thumbnail-Bilder einer Bildgalerie usw. Das Aussehen einer Liste spielt dabei keine Rolle. Die einzelnen List-Items dürfen auch nebeneinander stehen.

Ich versuche hier nur zu dokumentieren, was meiner Meinung nach sinnvoll ist.

Es gibt zwei Formen: mit und ohne Nummern. <ul> für unordered List und <ol> für ordered List. Ersteres im folgenden Beispiel eine Zutatenliste, zweiteres eine kleine Hitparade. In jeder Liste werden einzelne List-Items mit <li> eingepackt.

561

Der Bulletpoint kann per CSS entfernt oder ersetzt werden. (Auf optische HTML-Attribute wie type="square" sollte verzichtet werden.)

Mehrstufige Listen

Einzelne Listenpunkte benötigen oft Unterpunkte oder gar Unterunterpunkte. Grundsätzlich kann eine Liste endlos viele Stufen haben. Und natürlich darf man beide Formen mischen, je nach Bedarf.

561

Tricks mit der Nummerierung

Eine Zeit lang als veraltet abgestempelt wurden Zusatzinformationen für ordered Lists wie die Sortierreihenfolge, die Art der Nummerierung und mit welchem Wert die Nummerierung beginnen soll. Man war der Ansicht, das sei nur Dekoration. Blödsinn. Wenn diese Zusätze der Bedeutung entsprechen und nicht nur Deko sind, sollen sie in HTML angewandt werden. Wenns nur ums Outfit geht, löst mans in besser in CSS. Hier ein Muster für die Reihenfolge und den Anfangswert:

561

Römische Zahlen oder Buchstaben

Passen die arabischen Zahlen nicht zum Inhalt, hilft vielleicht eine der vier weiteren Nummerierungsarten:

561


Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.