HTML ma trzy typy list, każdy z semantycznym znaczeniem. Użycie właściwego wspomaga dostępność (czytniki ekranu ogłaszają "lista, 3 elementy") i strukturę.
Lista nieuporządkowana — kolejność nie ma znaczenia
html
Apples
Bananas
Cherries
Domyślnie renderuje się z punktami. Używaj do menu nawigacyjnych, list funkcji, tagów — wszystkiego, gdzie kolejność nie ma znaczenia.
<ol type="1" start="1">
<li>Preheat the oven</li>
<li>Mix ingredients</li>
<li>Bake for 20 minutes</li>
</ol>
Renderuje się z numerami. Używaj do kroków, rankingów, instrukcji. Atrybuty: type (1, a, A, i, I), start (pierwszy numer), 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> to termin, <dd> jego opis — doskonały do słowników, metadanych i par klucz/wartość.
<nav>
<ul>
<li><a href="/">Home</a>
<ul><li><a href="/sub">Sub-page</a></li></ul> <!-- nested submenu -->
</li>
</ul>
</nav>
Menu nawigacyjne konwencjonalnie oznacza się jako <ul> wewnątrz <nav>.
Listy to nie tylko punkty — dają one zawartości strukturę, którą czytniki ekranu ogłaszają i którą możesz dowolnie stylizować (domyślne znaczniki są łatwo usuwane za pomocą CSS).
Wybór <ul> vs <ol> vs <dl> komunikuje znaczenie: nieuporządkowana, sekwencyjna lub termin-definicja.