3. Listy uporządkowane i nieuporządkowane

~10 min poziom: początkujący

Listy służą do prezentowania punktów, kroków, składników itp.

Lista nieuporządkowana <ul>

<ul>
  <li>Pierwszy punkt</li>
  <li>Drugi punkt</li>
  <li>Trzeci punkt</li>
</ul>

Lista uporządkowana <ol>

<ol>
  <li>Krok pierwszy</li>
  <li>Krok drugi</li>
  <li>Krok trzeci</li>
</ol>

Listy zagnieżdżone

<ul>
  <li>Owoce
    <ul>
      <li>Jabłko</li>
      <li>Banany</li>
    </ul>
  </li>
  <li>Warzywa</li>
</ul>

Listy i atrybuty

<!-- 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)

Najczęściej używane atrybuty w listach (HTML5):

Atrybut	Element	Co robi	Przykład
`reversed`	`<ol>`	Odwraca kolejność numeracji (od największej do 1)	`<ol reversed>`
`start`	`<ol>`	Ustawia numer startowy listy	`<ol start="5">`
`type`	`<ol>`	Rodzaj numeracji / punktorów	`type="A"` • `type="a"` • `type="I"` • `type="i"`
`value`	`<li>`	Własny numer dla danego elementu (nadpisuje automatyczną numerację)	`<li value="10">`

Uwaga: Atrybut type jest semantycznie słabszy niż CSS (list-style-type). Najlepiej używać go tylko wtedy, gdy bardzo zależy Ci na działaniu bez CSS.

Najważniejsze elementy wyjaśnione

<ul> – Znacznik listy nieuporządkowanej (punktory)
<ol> – Znacznik listy uporządkowanej (numerowana)
<li> – Pojedynczy element listy
reversed – Odwraca numerację (tylko <ol>)
start="n" – Zmienia numer początkowy (tylko <ol>)
type="..." – Rodzaj numeracji/punktorów (tylko <ol>)
value="n" – Własny numer dla danego <li>

Do zapamiętania: Używaj <ul> do list nienumerowanych i <ol> do numerowanych – to podstawa poprawnej semantyki list.

Zadanie

Stwórz:
1. Listę nieuporządkowaną zakupów
2. Listę uporządkowaną przepisu z numeracją rzymską (I, II, III…)
3. Listę rankingową 1–5 (odwróconą – od najlepszego do najgorszego)

Następna lekcja

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

[ Miejsce na reklamę ]