Markup Webdesign Journal

Die Links zu den Vorgängern:

• Teil 1: Überschriften
• Teil 2: Textabsätze

Um Listen geht es im dritten Teil dieser Serie. Sie stellen ein wichtiges und mächtiges Instrument zur Strukturierung von Websites dar. Als erstes gibt es einen kurzen Überblick der verschiedenen Typen, bevor ich dann darauf eingehen werde, warum es sinnvoll ist Listen auch für Navigationsmenüs einzusetzen. Ohne dabei zu sehr auf die Spezifikationen des W3C einzugehen, da es bei dieser Serie darum geht, ein Bewusstsein dafür zu schaffen, wann welche Elemente am sinnvollsten eingesetzt werden - und vor allem dass sie eingesetzt werden.

<ul> Unsortierte Listen (unordered lists)

Das sind die Listen, mit denen wohl die meisten als erstes Bekanntschaft machen. Sie dienen dazu (ungeordnet) Informationen aufzulisten. Als einfache Einsatzmöglichkeit für eine Website ist ein Kochrezept denkbar, das nacheinander die Zutaten listet.

<ul>
  <li>100g Mehl</li>
  <li>50g Zucker</li>
  <li>etc.</li>
</ul>

Das Ergebnis ist eine einfache Aufzählung:

• 100g Mehl
• 50g Zucker
• etc.

Sollte man solche oder einfache Aufzählungen auf der Website haben, setzt man hierfür diesen Typ Liste ein. Auf keinen Fall werden solche Dinge mit Hilfe von Zeilenumbrüchen umgesetzt. Wie z.B. hier:

<p>
  100g Mehl<br />
   50g Zucker<br />
   etc.
</p>

Solches “<b>ed and <br>eakfast Markup” sollte überhaupt vermieden werden. Da es semantisch in den allermeisten Fällen nicht korrekt ist.

Es ist auch dringend davon abzuraten, solche Informationen in Tabellen zu stecken. Tabellen sollten ausschließlich für tabellarische Daten eingesetzt werden. Nicht für Aufzählungen und, ganz nebenbei, schon gar nicht für das Layout der Website.

Es ist wichtig auch einfache Listen als solche kenntlich zu machen. Damit trägt man weiter dazu bei, die Website besser zu strukturieren. Die Inhalte sind so logischer gegliedert und die Übersichtlichkeit wird erhöht. Auch sehbehinderte Menschen, vor allem Blinde, die mit Hilfe von Screenreadern surfen, werden davon profitieren.

Eine Verschachtelung der Listen ist auch möglich, um die Inhalte weiter zu untergliedern.

<ol> geordnete Listen (ordered lists)

Geordnete Listen werden behandelt und dargestellt wie die ungeordneten Listen. Nur dass man hier die Möglichkeit hat, den Listeneinträgen eine Nummerierung voran zu stellen. Standardmäßig sind das unsere arabischen Ziffern (1, 2, 3 usw.). Andere Möglichkeiten findet man u.a. hier.

<dl> Definitionslisten (definition lists)

Sie bieten die Möglichkeiten, den Listeneinträgen Erläuterungen hinzuzufügen. Oder wie es der Name sagt, Begriffe zu definieren. Sie bestehen aus einem Definitionsterm (Ausdruck) (<dt> definition term) und einer Beschreibung (<dd> definition description). Beispiel:

<dl>
  <dt>
    Zu definierender Begriff
  <dt>
    <dd>
       Beschreibung
    </dd>
</dl>

Erzeugt folgende Ausgabe:

Zu definierender Begriff

Beschreibung

Die Beschreibung wird standardmäßig eingerückt. Das ganze lässt sich hier auch wieder mit CSS anpassen.

Auch hier gilt wieder, die Liste einzusetzen. Dafür hält (X)HTML diese Elemente bereit. Nicht mit Zeilenumbrüchen und ähnlichen, an dieser Stelle falschen Mitteln arbeiten.

Es lassen sich so auch Bilder und Grafiken beschriften. Ansehen kann man sich das in diesem Artikel von mir.

Navigationsmenüs mit Listen

Der Charakter eines Navigationsmenüs legt es nahe, dafür ebenfalls einfache Listen zu verwenden. Es handelt sich hierbei mehr oder weniger um eine ungeordnete Auflistung von Verweisen zu anderen Seiten des Webauftritts. Also kann - manche meinen muss - man diese als Liste auszeichnen. Denn Listen unterstützen die schnelle Navigation durch die Website und helfen Menschen mit Behinderungen dabei, sich zurecht zu finden. Ganz wichtig in diesem Zusammenhang: Ein Navigationsmenü muss deswegen nicht aussehen, wie eine ganz normale Liste. Der Fantasie sind dank CSS - wie man weiß - keine Grenzen gesetzt. Überzeugen kann man sich davon u.a. bei Listamatic (unten bei den Links).

Das Listenmodul für XHTML2 sieht sogar ein neues Element für Navigationslisten vor. <nl> steht für “navigation list”. Leider ist es noch eine ganze Weile hin, bis XHTML2 kommt - aber das ist ein anderes Thema. Also sollte man sich vorerst der vorhandenen Elemente bedienen.

Listen für Navigationszwecke können für Untermenüs auch verschachtelt werden. Diese können dann optisch mittels CSS so gestaltet werden, wie man sie braucht.

Links zum Thema Listenmenüs

• Listamatic: One list many options
• Einfach für Alle: Spaß mit Listen
• Einfach für Alle: Barrierefreie Naviationsmenüs

Listen in der Spezifikation

Für weitere Details, z.B. die Festlegung von Werten von geordneten Listen, empfiehlt sich die Übersetzung der Spezifikation des W3C.

So gehts weiter

Tabellen sind Thema des vierten und letzten Teils dieser Serie. Tabellen sind -auch wenn sie heute regelrecht verteufelt werden - ebenfalls ein wichtiger Bestandteil einer gut strukturierten Website.