Listy HTML

> Dodaj do ulubionych

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 listul) oraz listy definicji (ang. description listdl).

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>

Zobacz również