HTML kennt drei Listenarten: die ungeordnete Liste ul, die geordnete Liste ol und die Begriffsliste dl. Der Unterschied ist inhaltlich, nicht optisch – die Aufzählungszeichen lassen sich in CSS jederzeit ändern.
Ungeordnet: die Reihenfolge ist beliebig
<ul>
<li>Texteditor</li>
<li>Browser</li>
<li>Validator</li>
</ul>Vertauschen ändert nichts an der Aussage. Das ist das Kriterium.
Geordnet: die Reihenfolge trägt Bedeutung
<ol>
<li>Datei anlegen</li>
<li>Grundgerüst einfügen</li>
<li>Im Browser öffnen</li>
</ol>
<ol start="4" reversed>
<li>Vierter Punkt</li>
</ol>Mit start beginnt die Zählung an anderer Stelle, mit reversed läuft sie rückwärts, mit type lässt sich auf Buchstaben oder römische Ziffern umstellen. Ein Screenreader nennt die Nummer mit – bei einer Anleitung ist das der Unterschied zwischen „Schritt drei von fünf" und einem beliebigen Satz.
Begriffsliste: Paare aus Begriff und Erklärung
<dl>
<dt>Element</dt>
<dd>Baustein aus Tag, Inhalt und Ende.</dd>
<dt>Attribut</dt>
<dd>Zusatzangabe im öffnenden Tag.</dd>
</dl>Passend auch für Metadaten wie Datum, Verfasser, Kategorie – überall dort, wo Bezeichnung und Wert zusammengehören.
Die Verschachtelungsregel
Direktes Kind von ul und ol darf nur li sein. Eine Unterliste gehört deshalb in das Listenelement, nicht daneben:
<ul>
<li>Textauszeichnung
<ul>
<li>Hervorhebungen</li>
<li>Zitate</li>
</ul>
</li>
<li>Medien</li>
</ul>Die falsche Variante – Unterliste als Geschwister – ist ein Validierungsfehler und erzeugt in der Sprachausgabe eine Liste, deren Einträge nicht zusammenpassen.
Warum das mehr ist als Optik
Ein Screenreader kündigt eine Liste an und nennt die Zahl der Einträge. Wer stattdessen Absätze mit Aufzählungszeichen und Zeilenumbrüchen baut, bekommt optisch dasselbe und verliert diese Ansage.
<!-- sieht aus wie eine Liste -->
<p>• Erstens<br>• Zweitens</p>
<!-- ist eine -->
<ul>
<li>Erstens</li>
<li>Zweitens</li>
</ul>Auch die Hauptnavigation ist eine Liste von Verweisen: nav mit ul darin ist die verbreitete und richtige Form.