W języku HTML jest dostępna specjalna grupa elementów służących do tworzenia list.
Wyróżnia się trzy rodzaje list HTML: listy uporządkowane (ang. ordered list – element ol
), listy nieuporządkowane (ang. unordered list – ul
) oraz listy definicji (ang. description list – dl
).
Listy uporządkowane
Listy uporządkowane to takie, których pozycje są ponumerowane w pewien sposób. Domyślnie przeglądarki stosują numerację liczbową, zaczynającą się od 1.
Sposób numerowania listy uporządkowanej można zmienić za pomocą odpowiednich reguł CSS.
Do tworzenia list uporządkowanych służą elementy ol
i li
, np.:
<ol>
<li>Przejdź na dysk C</li>
<li>Otwórz folder Windows</li>
<li>Znajdź i zaznacz plik explorer.exe</li>
<li>Naciśnij klawisz Del</li>
</ol>
Listy nieuporządkowane
Listy nieuporządkowane nie mają numeracji elementów, tylko oznaczają je w inny sposób. Domyślnie przeglądarki stosują okrągłe czarne punktory.
Sposób oznaczania punktów listy nieuporządkowanej można zmienić za pomocą odpowiednich reguł CSS.
Do tworzenia list nieuporządkowanych służą elementy ul
i li
, np.:
<ul>
<li>jabłka</li>
<li>kapusta</li>
<li>kalafior</li>
<li>sałata</li>
</ul>
Listy definicji
Listy definicji przedstawiają pojęcia i ich definicje lub opisy.
Listę definicji reprezentuje element dl
(ang. definition list). Pojęcia umieszczamy w elementach dt
(ang. definition term), a definicje pojęć – w elementach dd
(and. description details), np.:
<dl>
<dt>Pies</dt>
<dd>- zwierzę czworonożne</dd>
<dt>Jabłko</dt>
<dd>- smaczny owoc</dd>
<dt>Ziemniak</dt>
<dd>- smaczne warzywo</dd>
<dt>Świnia</dt>
<dd>- smaczne zwierzę</dd>
</dl>
Domyślnie przeglądarki stosują wcięcie elementów reprezentujących definicje, ale można to zmienić za pomocą odpowiednich reguł CSS.
Zagnieżdżanie list
Listy można zagnieżdżać, tzn. można umieszczać listy dowolnego typu w innych listach dowolnego typu, np.:
<ul>
<li>Ssaki
<ul>
<li>Gryzonie</li>
<li>Jamrajokształtne</li>
<li>...</li>
</ul>
</li>
<li>Gady</li>
<li>Płazy</li>
</ul>