Das ul-Element: Die ungeordnete Liste

vom 11.08.2015 von Oliver Misch

Das <ul> ("unordered list") sammelt gleichrangige Punkte, deren Reihenfolge keine Rolle spielt: Zutaten, Stichworte, Menüeinträge. Jeder Punkt steckt in einem <li>, der Browser malt standardmäßig runde Aufzählungszeichen davor.

Syntax und Beispiel

HTML-Code

<ul>
    <li>Disketten</li>
    <li>Lötkolben</li>
    <li>Geduld</li>
</ul>

Listen verschachteln

Ein li darf selbst wieder eine Liste enthalten, so entstehen Unterpunkte. Wichtig ist die Position: die innere Liste steht im li, vor dessen schließendem Tag.

<ul>
    <li>Hardware
        <ul>
            <li>Röhrenmonitor</li>
            <li>Kugelmaus</li>
        </ul>
    </li>
    <li>Software</li>
</ul>

ul, ol oder gar keine Liste?

Spielt die Reihenfolge eine Rolle (Anleitungsschritte, Ranglisten), nimm die nummerierte Schwester ol. Und wenn es nur zwei, drei Begriffe mitten im Satz sind, brauchen die keine Liste, das kann der Fließtext besser. Listen sind Struktur: Screenreader sagen "Liste mit drei Einträgen" an, das soll dann auch stimmen und nicht jede Textzeile zur Liste erklärn.

Typische Fehler

• Text direkt ins ul schreiben. Zwischen <ul> und den li-Elementen darf nichts anderes stehen.
• Listen für Einrückungs-Optik missbrauchen. Einrücken macht CSS.
• Die Aufzählungszeichen mit Sonderzeichen von Hand tippen statt eine echte Liste zu benutzen. Sieht gleich aus, ist aber für Maschinen nur Text.

Verschachtelte Listen

Listen dürfen Listen enthalten, und zwar nach einer festen Regel: Die Unterliste wohnt im li-Element des übergeordneten Punkts, nicht daneben. Das ist einer der häufigsten Verschachtelungsfehler überhauptt.

<ul>
    <li>Werkzeug
        <ul>
            <li>Texteditor</li>
            <li>Browser</li>
        </ul>
    </li>
    <li>Wissen</li>
</ul>

Der Browser rückt Unterlisten automatisch ein und wechselt das Aufzählungszeichen. Mehr als zwei, drei Ebenen sollte man Lesern trotzdem nicht zumuten, ab dann sind eigene Abschnitte mit Überschriften die bessere Gliederungg.

Häufige Stolpersteine

• Text direkt im ul: Zwischen <ul> und den li-Elementen darf nichts anderes stehen, kein loser Text, keine Absätze. Der Validator meckert sofort.
• Liste als Einrück-Werkzeug: Wer nur Abstand will, nimmt margin, keine Liste ohne Listeninhalt.
• Aufzählungszeichen entfernen: Für Menüs völlig legitim, per list-style: none, so macht es auch die Navigation dieses Wikis.

Verwandt: ol · li · nav