Listen

Zu unterscheiden sind Aufzählungslisten, nummerierte Listen und Definitionslisten. Aufzählungslisten sind unsortierte Listen, bei denen die Reihenfolge der Listeneinträge keine Rolle spielt. Nummerierte Listen sind sortierte Listen, die Reihenfolgen abbilden. Definitionslisten werden meist verwendet, wenn ein Tabellen-ähnliches Layout für bestimmte Inhaltsbereiche (z.B. Glossar oder Index) umzusetzen ist.
Stand 15.10.2012

Inhaltsübersicht:

1. Aufzählungslisten und nummerierte Listen
2. Listen mit eigenen Grafiken als Listenpunkt
3. Definitionslisten

Aufzählungslisten und nummerierte Listen

Im Web gibt es zwei häufig eingesetzte Arten von Listen: Aufzählungslisten und nummerierte Listen (siehe nachfolgendes Beispiel). Aufzählungslisten (<ul>-Element) sind unsortierte Listen (engl. Unordered List). Sie werden für zusammengehörige Daten eingesetzt, bei denen die Reihenfolge der Listeneinträge keine Rolle spielt. Jedem Listeneintrag wird automatisch ein Aufzählungszeichen (engl. Bullet) vorangestellt. Nummerierte Listen (<ol>-Element) sind sortierte Listen (engl. Ordered List) und bilden Reihenfolgen ab. Alle Listeneinträge werden automatisch durchnummeriert, Nummerierungshierarchien wie 1, 1.1, 1.1.1 sind jedoch nicht möglich.

Beispiel XHTML-Datei - Listen (Ausschnitt):

[...]
<!-- unsortierte Liste (unordered list) --> <ul>
  <li>Erster Punkt einer einfachen (ungeordneten) Liste</li>
  <li>Zweiter Punkt einer einfachen (ungeordneten) Liste</li>
</ul>
[...]
<!-- sortierte Liste (ordered list) --> <ol>
  <li>Erster Punkt einer geordneten Liste</li>
  <li>Zweiter Punkt einer geordneten Liste</li>
</ol>

Bildbeschreibung "Ungeordnete und geordnete Listen": Bildschirmfoto der optischen Browser-Ansicht des vorangegangenen Quelltext-Beispiels zur Veranschaulichung der zwei Listenarten - ungeordnete Listen mit vorangestellten Aufzählungspunkten und geordnete Listen, die nummeriert sind.

Seitenanfang

Listen mit eigenen Grafiken als Listenpunkt

Listen können mit eigenen Grafiken als Listenpunkte gestaltet werden (siehe nachfolgendes Bild). Werden eigene Grafiken als Listenpunkte des <ul>-Elementes verwendet, ist über die CSS-Datei ergänzend eine Alternative anzugeben, die bei Nichtladen der Grafik zum Einsatz kommt (siehe zweites nachfolgendes Bild).

Beispiel CSS-Datei - Listen (Ausschnitt):

ul.eigene_grafik {
  list-style: url(blauer_kreis.gif) disc;
}

Beispiel XHTML-Datei - Listen mit eigener Grafik als Listenpunkt (Ausschnitt):

<ul class="eigene_grafik">
  <li>Listenpunkt 1</li>
  <li>Listenpunkt 2</li>
  <li>Listenpunkt 3</li>
</ul>

Bildbeschreibung "Liste bei eingeschalteten Grafiken": Bildschirmfoto der optischen Browser-Ansicht des vorangegangenen Quelltext-Beispiels. Listenelemente können eine individuelle Grafik als Aufzählungszeichen zugeordnet bekommen.

Bildbeschreibung "Liste bei ausgeschalteten Grafiken": Listenelemente können eine Grafik als Aufzählungszeichen zugeordnet bekommen. Werden keine Grafiken angezeigt, so tritt das alternativ festgelegte Aufzählungszeichen an diese Stelle.

Kriterien für ein barrierefreies bzw. barrierearmes Webdesign: Listen erhöhen die Lesbarkeit und vermitteln schnell sowie übersichtlich Informationen. Suchmaschinen erkennen eine Listenformatierung und gewichten die Inhalte der Listeneinträge höher, als wenn der Inhalt in einem Fließtext auftreten würde.

Seitenanfang

Definitionslisten

Die Hauptanwendungsgebiete einer Definitionsliste sind Glossar-, Index- und FAQ-Seiten. Definitionslisten eignen sich jedoch auch hervorragend für Übersichtsseiten mit Kombinationen von Artikel-Vorschaubild, Artikel-Teaser und Verweis auf den entsprechenden Artikel oder bspw. für die Kombination von Grafiken und ausführlicheren Bildbeschreibungen bzw. Bildunterschriften.

Definitionslisten werden mit dem Element <dl> angelegt. Für die Inhalte stehen das <dt>-Element (z.B. für eine Grafik) und das <dd>-Element (z.B. für eine entsprechende Bildunterschrift oder Bildbeschreibung) zur Verfügung. Das <dd>-Element kann dabei mehrfach genutzt werden. Über CSS kann die optische Ausgabe der Definitionslisten individuell festgelegt werden.

Beispiel XHTML-Datei - Definitionslisten (Ausschnitt):

<dl>
  <dt>Grafik-Element</dt>
  <dd>Bildbeschreibung oder Bildunterschrift</dd>
</dl>

Auch der hier inhaltlich nachfolgende Block "Weiterführende Literatur" ist als Definitionsliste umgesetzt.

Seitenanfang