<ol> w HTML to znacznik służący do tworzenia list uporządkowanych, czyli takich, gdzie kolejność elementów ma znaczenie i każdy element zostaje automatycznie ponumerowany. Listy te są często nazywane listami numerowanymi.
Podstawowa składnia oraz budowa listy uporządkowanej
Znacznik <ol> (od ang. ordered list) otacza całą listę, a każdy element listy umieszcza się w osobnych znacznikach <li> (element listy – list item). Przykład najprostszego wykorzystania:
<ol>
<li>Pierwszy element</li>
<li>Drugi element</li>
<li>Trzeci element</li>
</ol>
Taka konstrukcja zostanie najczęściej wyświetlona w przeglądarce jako lista, gdzie kolejne punkty są automatycznie numerowane:
- Pierwszy element
- Drugi element
- Trzeci element
Czym różni się <ol> od <ul>?
<ol>– lista uporządkowana – każdy element posiada kolejne numerki, litery lub inne oznaczenia określone przez przeglądarkę bądź wymagania użytkownika;<ul>– lista nieuporządkowana – elementy listy mają identyczne, niezależne od pozycji znaczniki (np. kropki).
Użycie listy uporządkowanej jest właściwe, gdy kolejność elementów jest kluczowa – na przykład w instrukcjach, przepisach kuchennych, krokach postępowania, przewodnikach i rankingach.
Praktyczne przykłady zastosowania <ol>
Instrukcja krok po kroku
<p>Jak zaparzyć herbatę:</p>
<ol>
<li>Włóż torebkę herbaty do kubka.</li>
<li>Zalej wrzątkiem.</li>
<li>Poczekaj 3–5 minut.</li>
<li>Wyjmij torebkę herbaty.</li>
<li>Dodaj cukier lub cytrynę według uznania.</li>
</ol>
Lista rankingowa
<ol>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ol>
Przepis z instrukcjami
<p>Przepis na grog:</p>
<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>
Personalizacja kolejności i wyglądu listy
Znacznik <ol> oferuje dodatkowe atrybuty, które pozwalają dopasować listę do własnych potrzeb:
type– pozwala zmienić sposób numerowania. Przykłady wartości:1(domyślne – cyfry arabskie: 1, 2, 3,…),A(duże litery: A, B, C,…),a(małe litery: a, b, c,…),I(duże cyfry rzymskie: I, II, III,…),i(małe cyfry rzymskie: i, ii, iii,…).
Przykład użycia:
<ol type="A">
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
</ol>
Wyświetli się jako: A. Punkt pierwszy
B. Punkt drugi
start– ustala numerację od wybranej liczby lub litery:
<ol start="5">
<li>Punkt jeden</li>
<li>Punkt dwa</li>
</ol>
Wyświetli jako:
- Punkt jeden
- Punkt dwa
reversed– odwraca kolejność numeracji:
<ol reversed>
<li>Ostatnia czynność</li>
<li>Przedostatnia czynność</li>
<li>Początkowa czynność</li>
</ol>
Numeracja wyświetli się: 3, 2, 1.
Zagnieżdżanie list
Możliwe jest umieszczenie innej listy w elemencie <li>, tworząc listy wielopoziomowe:
<ol>
<li>Pierwszy poziom
<ul>
<li>Drugi poziom (nieuporządkowana lista)</li>
<li>Kolejny punkt</li>
</ul>
</li>
<li>Drugi element listy głównej</li>
</ol>
Najważniejsze zasady stosowania <ol>
- Stosuj
<ol>tam, gdzie kolejność elementów ma konkretne znaczenie. - Każdy element listy należy umieszczać w tagu
<li>. - Można personalizować numerację oraz łączyć
<ol>z innymi typami list.
Zastosowanie <ol> umożliwia czytelne przedstawienie informacji uszeregowanych według ważności, kolejności lub pierwszeństwa, co poprawia zarówno użyteczność witryny, jak i jej dostępność dla użytkowników oraz robotów wyszukiwarek.
