Lekcja 4.3: Listy numerowane (<ol>)
Czym jest lista numerowana?
Lista numerowana (lub uporządkowana) w HTML służy do prezentowania zbioru elementów, których kolejność ma znaczenie. Elementy takiej listy są automatycznie numerowane przez przeglądarkę (np. 1, 2, 3 lub A, B, C).
Listy numerowane tworzy się za pomocą znacznika <ol> (ordered list), a każdy element listy, podobnie jak w listach nienumerowanych, umieszcza się wewnątrz znacznika <li> (list item).
Podstawowa struktura listy <ol>
Oto podstawowa struktura listy numerowanej:
<ol>
<li>Pierwszy krok</li>
<li>Drugi krok</li>
<li>Trzeci krok</li>
</ol>- Pierwszy krok
- Drugi krok
- Trzeci krok
Jak widać, przeglądarka domyślnie numeruje elementy listy za pomocą cyfr arabskich, zaczynając od 1.
Zastosowania list numerowanych
Listy numerowane są idealne do prezentowania informacji, gdzie kolejność jest istotna:
- Instrukcje krok po kroku
- Przepisy kulinarne
- Rankingi (np. najlepszych filmów, wyników sportowych)
- Procedury
- Spisy treści z numeracją
Atrybuty znacznika <ol>
Znacznik <ol> posiada kilka przydatnych atrybutów, które pozwalają modyfikować sposób numeracji:
Atrybut `type`
Określa typ numeracji. Możliwe wartości:
1- Cyfry arabskie (domyślne)a- Małe litery alfabetu łacińskiegoA- Wielkie litery alfabetu łacińskiegoi- Małe cyfry rzymskieI- Wielkie cyfry rzymskie
<ol type="a">
<li>Element a</li>
<li>Element b</li>
</ol>
<ol type="I">
<li>Element I</li>
<li>Element II</li>
</ol>- Element a
- Element b
- Element I
- Element II
Atrybut `start`
Określa numer (lub literę), od którego ma rozpocząć się numeracja. Wartość musi być liczbą całkowitą, niezależnie od atrybutu type.
<ol start="5">
<li>Element 5</li>
<li>Element 6</li>
</ol>
<ol type="a" start="3">
<li>Element c</li>
<li>Element d</li>
</ol>- Element 5
- Element 6
- Element c
- Element d
Atrybut `reversed`
Jest to atrybut logiczny (boolean). Jeśli jest obecny, numeracja listy będzie odwrócona (malejąca).
<ol reversed>
<li>Trzeci</li>
<li>Drugi</li>
<li>Pierwszy</li>
</ol>
<ol type="I" start="5" reversed>
<li>Element V</li>
<li>Element IV</li>
<li>Element III</li>
</ol>- Trzeci
- Drugi
- Pierwszy
- Element V
- Element IV
- Element III
Stylizacja numeracji za pomocą CSS
Podobnie jak w przypadku list nienumerowanych, wygląd numeracji można kontrolować za pomocą CSS, głównie za pomocą właściwości list-style-type. Oprócz wartości wymienionych przy atrybucie type, CSS oferuje znacznie więcej opcji, np. decimal-leading-zero (01, 02, 03), lower-greek (α, β, γ) i wiele innych.
<ol style="list-style-type: lower-roman;">
<li>Element i</li>
<li>Element ii</li>
</ol>
<ol style="list-style-type: decimal-leading-zero;">
<li>Element 01</li>
<li>Element 02</li>
</ol>- Element i
- Element ii
- Element 01
- Element 02
Uwaga: Atrybuty type, start i reversed są nadal częścią standardu HTML5 i można ich używać. Jednak dla bardziej zaawansowanej kontroli nad wyglądem i spójnością stylów na całej stronie, zaleca się używanie CSS.
Zagnieżdżanie list numerowanych
Listy numerowane można zagnieżdżać, umieszczając jedną listę <ol> wewnątrz elementu <li> innej listy. Przeglądarki zazwyczaj automatycznie stosują różne style numeracji dla kolejnych poziomów zagnieżdżenia (np. 1, a, i).
<ol>
<li>Punkt 1
<ol>
<li>Podpunkt 1.1</li>
<li>Podpunkt 1.2</li>
</ol>
</li>
<li>Punkt 2</li>
</ol>- Punkt 1
- Podpunkt 1.1
- Podpunkt 1.2
- Punkt 2
Zadanie praktyczne (z rozwiązaniem)
Zadanie: Stwórz listę numerowaną opisującą kroki parzenia herbaty. Rozpocznij numerację od 1, użyj cyfr rzymskich i odwróć kolejność.
Rozwiązanie:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Parzenie Herbaty</title>
</head>
<body>
<h1>Jak zaparzyć herbatę (od końca)?</h1>
<ol type="I" start="4" reversed>
<li>Poczekaj kilka minut, aż herbata się zaparzy.</li>
<li>Zalej torebkę/liście gorącą wodą.</li>
<li>Umieść torebkę z herbatą lub liście w kubku/filiżance.</li>
<li>Zagotuj wodę w czajniku.</li>
</ol>
</body>
</html>Dodatkowe zadania do samodzielnego wykonania:
- Stwórz ranking 5 najlepszych filmów, używając listy numerowanej.
- Stwórz listę numerowaną z krokami do wykonania jakiegoś zadania, używając liter jako numeracji (
type="a"). - Zagnieźdź listę numerowaną w innej liście numerowanej, np. tworząc spis treści z rozdziałami i podrozdziałami.
- Użyj CSS, aby zmienić styl numeracji na greckie litery (
list-style-type: lower-greek;).
Najczęściej zadawane pytania
Do czego służy lista numerowana (<ol>)?
Lista numerowana (<ol>) służy do prezentowania zbioru elementów, których kolejność jest ważna. Elementy są automatycznie numerowane. Jest idealna do instrukcji, przepisów, rankingów czy procedur.
Jak zmienić typ numeracji w liście <ol>?
Typ numeracji można zmienić za pomocą atrybutu type (np. type="a" dla liter, type="I" dla cyfr rzymskich) lub za pomocą właściwości CSS list-style-type, która oferuje więcej opcji.
Jak rozpocząć numerację od innej liczby niż 1?
Aby rozpocząć numerację od innej liczby, należy użyć atrybutu start="liczba", np. start="5" rozpocznie numerację od 5. Wartość atrybutu start jest zawsze liczbą, nawet jeśli typ numeracji to litery lub cyfry rzymskie.
Jak stworzyć listę z numeracją malejącą?
Aby stworzyć listę z numeracją malejącą, należy dodać atrybut logiczny reversed do znacznika <ol>: <ol reversed>. Można go łączyć z atrybutami type i start.
Czy można mieszać listy numerowane i nienumerowane?
Tak, można zagnieżdżać listy różnych typów. Na przykład, wewnątrz elementu <li> listy numerowanej można umieścić całą listę nienumerowaną (<ul>) i odwrotnie, tworząc złożone struktury list.