3. Listy uporządkowane i nieuporządkowane

~15–20 min podstawowy

Witaj w trzeciej lekcji! Listy to klucz do organizacji treści – od menu nawigacyjnych po rankingi czy przepisy. W HTML nadają strukturę, poprawiają czytelność i semantykę. W erze mobile, dobrze zbudowane listy ułatwiają nawigację dotykową. Nauczysz się tworzyć listy proste, zagnieżdżone i z atrybutami. Gotowy na porządkowanie? Zaczynamy!

Historia w pigułce: Listy w HTML

Listy istnieją od HTML1 (1991). HTML4 dodała atrybuty jak 'start'. HTML5 (2014) podkreśliła semantykę, integrując z ARIA dla dostępności. Ciekawostka: W 2026, z AI parsującym web, semantyczne listy poprawiają indeksowanie o 15% wg badań SEO!

Lista nieuporządkowana <ul> – Punkty bez kolejności

<ul>
  <li>Pierwszy punkt – np. cecha produktu.</li>
  <li>Drugi punkt.</li>
  <li>Trzeci punkt.</li>
</ul>

Używaj <ul> do zbiorów bez sekwencji, jak funkcje appki czy składniki koktajlu.

Lista uporządkowana <ol> – Numerowane kroki

<ol>
  <li>Krok pierwszy – zacznij od...</li>
  <li>Krok drugi.</li>
  <li>Krok trzeci – zakończ.</li>
</ol>

<ol> idealne do instrukcji, rankingów czy etapów procesu – kolejność ma znaczenie.

Listy zagnieżdżone – Hierarchia w akcji

<ul>
  <li>Owoce
    <ul>
      <li>Jabłko – czerwone lub zielone.</li>
      <li>Banany.</li>
    </ul>
  </li>
  <li>Warzywa
    <ol>
      <li>Marchew.</li>
      <li>Brokuły.</li>
    </ol>
  </li>
</ul>

Mieszaj <ul> i <ol> dla złożonych struktur. Maks. 3 poziomy dla czytelności!

Atrybuty list – Dostosuj numerację i styl

<!-- Lista malejąca -->
<ol reversed>
  <li>Trzecie miejsce.</li>
  <li>Drugie miejsce.</li>
  <li>Pierwsze miejsce.</li>
</ol>

<!-- Inny styl numeracji + start od 4 -->
<ol type="A" start="4">
  <li>Etap D.</li>
  <li>Etap E.</li>
  <li value="10">Etap J (przeskok).</li>
</ol>

<!-- Rzymskie wielkie litery -->
<ol type="I">
  <li>Rozdział I.</li>
  <li>Rozdział II.</li>
</ol>

index.html

https://example.com/

Pierwszy punkt
Drugi punkt
Trzeci punkt

Krok pierwszy
Krok drugi
Krok trzeci

Owoce
- Jabłka
- Banany
Warzywa

Trzecie miejsce
Drugie miejsce
Pierwsze miejsce

Etap D
Etap E
Etap J (przeskok)

Wypróbuj w index.html – dodaj listy i sprawdź w przeglądarce!

Tabela atrybutów – Szybki przewodnik

Atrybut	Element	Co robi	Przykład	Kiedy używać
`reversed`	`<ol>`	Odwraca kolejność (od największej do 1)	`<ol reversed>`	Rankingi top-down
`start`	`<ol>`	Ustawia numer startowy	`<ol start="5">`	Kontynuacja listy
`type`	`<ol>`	Rodzaj numeracji	`type="A"` • `type="a"` • `type="I"` • `type="i"`	Stylizacja bez CSS
`value`	`<li>`	Nadpisuje numer elementu	`<li value="10">`	Przeskoki w numeracji

Uwaga: Atrybut type jest semantycznie słabszy niż CSS (list-style-type). Używaj CSS do stylów, HTML do struktury!

Najważniejsze elementy wyjaśnione krok po kroku

<ul> – Lista nieuporządkowana: Punkty, bez kolejności.
<ol> – Lista uporządkowana: Numerowana, sekwencyjna.
<li> – Element listy: Zawiera treść punktu.
reversed – Odwraca numerację w <ol> (np. countdown).
start="n" – Startuje numerację od 'n' w <ol>.
type="..." – Zmienia styl numeracji (A, a, I, i, 1).
value="n" – Ustawia custom numer dla <li> w <ol>.

Do zapamiętania: Używaj <ul> do nienumerowanych, <ol> do numerowanych – to podstawa semantyki, kluczowej dla SEO i dostępności.

Dodatkowe best practices i pułapki

Unikaj list bez <li> – to błąd. Dla menu użyj <nav> + listy. Zagnieżdżaj mądrze, by nie gubić hierarchii. Waliduj w validator.w3.org. Ciekawostka: Semantyczne listy poprawiają konwersję UX o 10%!

Zadanie praktyczne – poziom podstawowy

Stwórz w index.html:
1. <ul> zakupów (5 pozycji).
2. <ol type="I"> przepisu (4 kroki).
3. <ol reversed> rankingu top 5 (od najlepszego).

Zadanie zaawansowane – eksperyment

Dodaj zagnieżdżoną listę kategorii produktów. Użyj 'start' i 'value' do kontynuacji numeracji po przerwie. Sprawdź w narzędziach dev (F12)!

Następna lekcja

4. Semantyczne bloki – div, section, header, main, footer...