HTML hat drei Listentypen, jeder mit semantischer Bedeutung. Die richtige Verwendung hilft der Barrierefreiheit (Bildschirmleser geben aus „Liste, 3 Einträge aus") und der Struktur.
Apples
Bananas
Cherries
Wird standardmäßig mit Aufzählungspunkten dargestellt. Verwenden Sie diese für Navigationsmenüs, Funktionslisten, Tags – alles, wo die Reihenfolge nicht relevant ist.
<ol type="1" start="1">
<li>Preheat the oven</li>
<li>Mix ingredients</li>
<li>Bake for 20 minutes</li>
</ol>
Wird mit Nummern dargestellt. Verwenden Sie diese für Schritte, Rankings, Anweisungen. Attribute: type (1, a, A, i, I), start (erste Nummer), reversed.
<dl>
<dt>HTML</dt>
<dd>The markup language for web pages.</dd>
<dt>CSS</dt>
<dd>The styling language for web pages.</dd>
</dl>
<dt> ist der Begriff, <dd> seine Beschreibung – ideal für Glossare, Metadaten und Schlüssel/Wert-Paare.
<nav>
<ul>
<li><a href="/">Home</a>
<ul><li><a href="/sub">Sub-page</a></li></ul> <!-- nested submenu -->
</li>
</ul>
</nav>
Navigationsmenüs werden konventionell als <ul> innerhalb von <nav> strukturiert.
Listen sind nicht nur für Aufzählungspunkte – sie geben Inhalten eine Struktur, die Bildschirmleser ankündigen können und die Sie frei gestalten können (die Standard-Marker lassen sich leicht mit CSS entfernen).
Die Wahl zwischen <ul>, <ol> und <dl> kommuniziert Bedeutung: ungeordnet, sequenziell oder Begriff-Definition.