Tag <ol> (ordered list) służy do tworzenia list uporządkowanych – zbiorów elementów, gdzie kolejność ma znaczenie. W przeciwieństwie do list nieuporządkowanych (<ul>), elementy listy <ol> są automatycznie numerowane lub oznaczane alfabetycznie.
Kiedy używać listy uporządkowanej?
Listę <ol> warto zastosować w następujących sytuacjach:
- instrukcje i przepisy – kroki do wykonania w określonej kolejności;
- procedury i algorytmy – procesy, gdzie kolejność jest kluczowa;
- rankingi i klasyfikacje – zestawienia, gdzie pozycja ma znaczenie;
- przewodniki i tutoriale – materiały edukacyjne wymagające sekwencji;
- spisy treści – numerowane rozdziały i sekcje.
Podstawowa struktura
Poniżej znajdziesz minimalny przykład składni listy uporządkowanej:
<ol>
<li>Pierwszy element</li>
<li>Drugi element</li>
<li>Trzeci element</li>
</ol>
Każdy element listy musi być zamknięty w tagu <li> (list item). Tag otwierający <ol> i zamykający </ol> są obowiązkowe.
Praktyczny przykład – przepis kulinarny
Idealnym zastosowaniem listy <ol> jest przepis, gdzie kolejność kroków jest istotna:
<article>
<h2>Przepis na grog</h2>
<ol>
<li>Weź kubek o pojemności ok. 300 ml</li>
<li>Wlej 50 ml wódki</li>
<li>Wlej 50 ml soku malinowego</li>
<li>Dodaj pokrojony na ćwiartki plasterek pomarańczy</li>
<li>Dodaj szczyptę cynamonu</li>
<li>Dodaj dwa goździki</li>
<li>Dopełnij gorącą wodą</li>
</ol>
</article>
Atrybuty tagu <ol>
Atrybut type – zmiana rodzaju numeracji
Atrybut type pozwala zmienić sposób numerowania listy. Dostępne opcje przedstawia poniższa tabela:
| Wartość | Efekt | Odpowiednik CSS |
|---|---|---|
type="1" |
1, 2, 3… (domyślnie) | decimal |
type="a" |
a, b, c… | lower-alpha |
type="A" |
A, B, C… | upper-alpha |
type="i" |
i, ii, iii… | lower-roman |
type="I" |
I, II, III… | upper-roman |
Przykład z numeracją alfabetyczną (małe litery):
<ol type="a">
<li>Weź kubek o pojemności ok. 300 ml</li>
<li>Wlej 50 ml wódki</li>
<li>Wlej 50 ml soku malinowego</li>
</ol>
Wynik: a) Weź kubek…, b) Wlej 50 ml wódki…, c) Wlej 50 ml soku…
Numeracja rzymska (wielkie litery):
<ol type="I">
<li>Pierwszy krok</li>
<li>Drugi krok</li>
<li>Trzeci krok</li>
</ol>
Wynik: I) Pierwszy krok, II) Drugi krok, III) Trzeci krok
Atrybut start – zmiana wartości początkowej
Atrybut start określa, od której wartości ma zacząć się numeracja i pozwala kontynuować ją z wcześniejszej listy:
<ol start="0">
<li>zerowy</li>
<li>pierwszy</li>
<li>drugi</li>
<li>trzeci</li>
</ol>
Wynik: 0) zerowy, 1) pierwszy, 2) drugi, 3) trzeci
Praktyczne zastosowanie – kontynuowanie numeracji z poprzedniej listy:
<ol type="I" start="7">
<li>siódmy element listy</li>
<li>ósmy element listy</li>
<li>dziewiąty element listy</li>
</ol>
Atrybut reversed – odwrócona kolejność
Atrybut reversed powoduje, że lista jest numerowana w porządku malejącym – idealne do odliczania wstecz:
<ol reversed>
<li>piąty</li>
<li>czwarty</li>
<li>trzeci</li>
<li>drugi</li>
<li>pierwszy</li>
</ol>
Wynik: 5) piąty, 4) czwarty, 3) trzeci, 2) drugi, 1) pierwszy
Atrybut value w elementach <li>
Atrybut value pozwala nadpisać numerację dla konkretnego elementu listy i w razie potrzeby „przeskoczyć” do innej wartości:
<ol>
<li value="10">Element numerowany jako 10</li>
<li>Element numerowany jako 11</li>
<li value="20">Element numerowany jako 20</li>
<li>Element numerowany jako 21</li>
</ol>
Wynik: 10) Element numerowany jako 10, 11) Element numerowany jako 11, 20) Element numerowany jako 20, 21) Element numerowany jako 21
Praktyczne przykłady
Lista nawigacyjna rozdziałów
Poniżej przykład użycia <ol> do stworzenia spisu rozdziałów z linkami:
<nav>
<h2>Nawigacja książki</h2>
<ol>
<li>
<a href="#rozdzial-1">Rozdział 1: Wprowadzenie</a>
</li>
<li>
<a href="#rozdzial-2">Rozdział 2: Podstawy HTML</a>
</li>
<li>
<a href="#rozdzial-3">Rozdział 3: Zaawansowany HTML</a>
</li>
</ol>
</nav>
Lista instrukcji instalacji
Oto prosta sekwencja kroków w instalatorze, gdzie kolejność działań jest kluczowa:
<ol>
<li>Pobierz plik instalacyjny</li>
<li>Uruchom plik .exe</li>
<li>Zaakceptuj warunki licencji</li>
<li>Wybierz folder docelowy</li>
<li>Czekaj na ukończenie instalacji</li>
<li>Uruchom aplikację</li>
</ol>
Stylowanie za pomocą CSS
Domyślnie przeglądarki stosują do <ol> następujące style CSS:
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Niestandardowe stylowanie
Możesz dostosować wygląd listy za pomocą CSS – od marginesów po krój i typ numeracji:
/* Zmiana koloru i rozmiaru czcionki */
ol {
color: #333;
font-size: 16px;
}
/* Zmiana marginesów i wcięć */
ol {
margin-left: 20px;
padding-left: 30px;
}
/* Stylowanie elementów listy */
li {
margin-bottom: 10px;
line-height: 1.6;
}
/* Zmiana stylu numeracji */
ol {
list-style-type: lower-roman;
}
Przykład kompletnie dostosowanej listy (np. w ramce wyróżniającej sekcję):
.custom-list {
background-color: #f5f5f5;
border-left: 4px solid #0066cc;
padding: 20px;
border-radius: 4px;
}
.custom-list ol {
margin: 0;
padding-left: 30px;
list-style-type: decimal;
}
.custom-list li {
margin-bottom: 12px;
color: #333;
font-weight: 500;
}
Zagnieżdżone listy
Listy można zagnieżdżać, tworząc logiczną hierarchię tematów i podrozdziałów:
<ol>
<li>HTML
<ol type="a">
<li>Struktura dokumentu</li>
<li>Tagi semantyczne</li>
<li>Formularze</li>
</ol>
</li>
<li>CSS
<ol type="a">
<li>Selektory</li>
<li>Box model</li>
<li>Flexbox i Grid</li>
</ol>
</li>
<li>JavaScript
<ol type="a">
<li>Zmienne i typy danych</li>
<li>Funkcje</li>
<li>Asynchroniczność</li>
</ol>
</li>
</ol>
Dostępność (a11y)
Tag <ol> automatycznie komunikuje czytnikom ekranu, że lista ma określoną kolejność, co poprawia zrozumiałość treści i komfort nawigacji dla osób korzystających z technologii asystujących.
Kontekst użycia w HTML5
Element <ol> należy do treści ogólnej (jeśli zawiera przynajmniej jeden element <li>). Może być umieszczony wewnątrz:
- elementów treści ogólnej,
- artykułów, sekcji, asidów,
- nagłówków i stopek.
Jedynymi dozwolonymi elementami potomnymi <ol> są:
<li>– elementy listy;<script>– skrypty;<template>– szablony.