<ol>
Lista numerowana, w której kolejność pozycji ma znaczenie.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Elementy
<li>(dopuszczalne są też<script>i<template>)
Przykład
#<h3>Jak opublikować pierwszą stronę</h3>
<ol>
<li>Utwórz plik <code>index.html</code>.</li>
<li>Dodaj nagłówek i kilka akapitów.</li>
<li>Sprawdź stronę w przeglądarce.</li>
<li>Wgraj plik na hosting.</li>
</ol>Definicja i zastosowanie
#Element <ol> (od ordered list) tworzy listę uporządkowaną. Przeglądarka sama numeruje pozycje <li>, więc po dodaniu albo usunięciu kroku numeracja nadal się zgadza. To dobry wybór dla instrukcji krok po kroku, przepisów, rankingów i spisów treści.
Numerację dostosujesz atrybutami: start ustawia pierwszy numer, reversed odwraca kolejność, a type zamienia cyfry na litery albo liczby rzymskie. Pojedynczej pozycji nadasz własny numer atrybutem value elementu <li>.
Zadaj sobie pytanie, czy zmiana kolejności zepsułaby sens listy. Jeśli tak, wybierz <ol>, jeśli nie, wystarczy <ul>. Czytniki ekranu zapowiadają listę i liczbę jej pozycji, więc łatwo śledzić, na którym etapie instrukcji się jest.
Składnia
#<ol>
<li>…</li>
<li>…</li>
</ol>Atrybuty
#liczba całkowita
Numer, od którego zaczyna się lista. Przydaje się, gdy listę przerywa akapit, a numeracja ma biec dalej. Działa też z literami i liczbami rzymskimi:start="3"razem ztype="a"zacznie od „c”.atrybut logiczny
Odwraca numerację, więc lista odlicza w dół. Pasuje do rankingów, które kończą się na zwycięzcy. Kolejność elementów w kodzie się nie zmienia, zmieniają się tylko numery.1 | a | A | i | I
Rodzaj numeracji: cyfry (1, domyślnie), małe lub wielkie litery (a,A) albo małe lub wielkie liczby rzymskie (i,I). Używaj go, gdy rodzaj numeru ma znaczenie, na przykład w regulaminie z punktami „a”, „b”, „c”. Do celów czysto wizualnych lepsza jest właściwość CSSlist-style-type.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#start
liczba całkowitaNumer, od którego zaczyna się lista. Przydaje się, gdy listę przerywa akapit, a numeracja ma biec dalej. Działa też z literami i liczbami rzymskimi: start="3" razem z type="a" zacznie od „c”.
<p>Kroki 1–3 omówiliśmy w poprzedniej lekcji.</p>
<ol start="4">
<li>Dodaj arkusz stylów.</li>
<li>Ustaw kolory i czcionki.</li>
</ol>reversed
atrybut logicznyOdwraca numerację, więc lista odlicza w dół. Pasuje do rankingów, które kończą się na zwycięzcy. Kolejność elementów w kodzie się nie zmienia, zmieniają się tylko numery.
<h4>Top 3 języki wśród naszych uczniów</h4>
<ol reversed>
<li>Python</li>
<li>JavaScript</li>
<li>HTML i CSS</li>
</ol>type
1 | a | A | i | IRodzaj numeracji: cyfry (1, domyślnie), małe lub wielkie litery (a, A) albo małe lub wielkie liczby rzymskie (i, I). Używaj go, gdy rodzaj numeru ma znaczenie, na przykład w regulaminie z punktami „a”, „b”, „c”. Do celów czysto wizualnych lepsza jest właściwość CSS list-style-type.
<p>Uczestnik kursu ma prawo do:</p>
<ol type="a">
<li>dostępu do wszystkich lekcji,</li>
<li>pomocy mentora,</li>
<li>przerwy w nauce bez utraty postępów.</li>
</ol>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
ol {
display: block;
list-style-type: decimal;
margin-block: 1em;
padding-inline-start: 40px;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie wpisuj numerów ręcznie w treści pozycji. Przeglądarka numeruje sama, a ręczne numery rozjadą się po pierwszej zmianie.
- Wygląd numerów zmienisz w CSS przez
li::marker, na przykład kolor albo grubość czcionki. - Numerację wielopoziomową w stylu „1.2.3” zbudujesz z liczników CSS:
counter-reset,counter-incrementicounters().
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.