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.

Verwandt: ol · li · nav