Kurs HTML

Czym są listy w HTML?

Listy w HTML są fundamentalnym narzędziem do prezentowania informacji w uporządkowany i czytelny sposób. Pozwalają na grupowanie powiązanych ze sobą elementów, co ułatwia użytkownikom skanowanie i przyswajanie treści. HTML oferuje trzy główne typy list, z których każdy ma swoje specyficzne zastosowanie.

Typy list w HTML

HTML definiuje trzy podstawowe typy list:

1. Listy nienumerowane (nieuporządkowane) - <ul>

   Służą do prezentowania elementów, których kolejność nie ma znaczenia. Elementy listy są zazwyczaj oznaczane punktorem (np. kropką, kwadratem).

   Przykład: Lista zakupów, lista cech produktu.

2. Listy numerowane (uporządkowane) - <ol>

   Służą do prezentowania elementów, których kolejność jest istotna. Elementy listy są automatycznie numerowane (np. 1, 2, 3 lub A, B, C).

   Przykład: Kroki w instrukcji, ranking, przepis kulinarny.

3. Listy definicyjne - <dl>

   Służą do prezentowania par terminów i ich definicji. Składają się z terminu (<dt>) i jego opisu (<dd>).

   Przykład: Słownik pojęć, lista pytań i odpowiedzi (FAQ).

Znaczenie semantyczne list

Używanie odpowiednich typów list jest ważne nie tylko dla wizualnej prezentacji, ale przede wszystkim dla semantyki dokumentu HTML. Poprawne użycie znaczników list pomaga:

• Przeglądarkom zrozumieć strukturę treści.
• Wyszukiwarkom (SEO) lepiej indeksować i interpretować zawartość strony.
• Technologiom wspomagającym (np. czytnikom ekranu) przekazywać informacje użytkownikom w sposób logiczny i zrozumiały. Czytniki ekranu informują użytkownika o liczbie elementów na liście i umożliwiają nawigację między nimi.

Dlatego należy wybierać typ listy adekwatnie do rodzaju prezentowanych informacji, a nie tylko ze względu na domyślny wygląd (który i tak można modyfikować za pomocą CSS).

Podstawowa struktura list

Każdy typ listy ma swoją specyficzną strukturę znaczników:

Lista nienumerowana (<ul>)

<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
</ul>Kopiuj

Znacznik <ul> (unordered list) otacza całą listę, a każdy element listy jest umieszczony wewnątrz znacznika <li> (list item).

Lista numerowana (<ol>)

<ol>
    <li>Pierwszy krok</li>
    <li>Drugi krok</li>
    <li>Trzeci krok</li>
</ol>Kopiuj

Znacznik <ol> (ordered list) otacza całą listę, a każdy element listy jest umieszczony wewnątrz znacznika <li>.

Lista definicyjna (<dl>)

<dl>
    <dt>Termin 1</dt>
    <dd>Definicja terminu 1.</dd>
    
    <dt>Termin 2</dt>
    <dd>Definicja terminu 2, która może być dłuższa.</dd>
</dl>Kopiuj

Znacznik <dl> (definition list) otacza całą listę. Każdy termin jest umieszczony wewnątrz znacznika <dt> (definition term), a jego definicja (lub opis) wewnątrz znacznika <dd> (definition description).

Co dalej?

W kolejnych lekcjach tego rozdziału szczegółowo omówimy każdy typ listy, jego atrybuty, możliwości stylizacji za pomocą CSS oraz zagnieżdżanie list.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Zastanów się, jakiego typu listy (<ul>, <ol>, <dl>) użyłbyś do zaprezentowania następujących informacji:

1. Lista składników potrzebnych do upieczenia ciasta.
2. Kolejne kroki przygotowania kawy.
3. Słowniczek podstawowych terminów HTML.
4. Lista ulubionych filmów.
5. Ranking najlepszych restauracji w mieście.

Rozwiązanie:

1. Lista składników: <ul> (lista nienumerowana), ponieważ kolejność składników zazwyczaj nie ma znaczenia.
2. Kroki przygotowania kawy: <ol> (lista numerowana), ponieważ kolejność kroków jest istotna.
3. Słowniczek terminów HTML: <dl> (lista definicyjna), idealna do prezentowania par termin-definicja.
4. Lista ulubionych filmów: <ul> (lista nienumerowana), chyba że tworzymy ranking, wtedy <ol>.
5. Ranking restauracji: <ol> (lista numerowana), ponieważ ranking implikuje uporządkowaną kolejność.