Element ol

Element HTML ol reprezentuje uporządkowaną listę elementów na stronie internetowej. Elementy te mogą być numerowane numerycznie lub uporządkowane alfabetycznie (patrz niżej).

Pozycje listy uporządkowanej reprezentuje element li.

Lista uporządkowana różni się od listy nieuporządkowanej tym, że jej kolejność pozycji ma znaczenie, a więc należy jej użyć na przykład w przypadku instrukcji, przepisów kulinarnych i innych procedur, w których kolejność wykonywania czynności ma znaczenie.

Przykład użycia elementu HTML ol

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

Kontekst użycia

Atrybuty obowiązkowe

Element HTML ol nie ma atrybutów obowiązkowych.

Atrybuty opcjonalne

Dodatkowo element ol obsługuje atrybuty globalne i atrybuty zdarzeniowe.

Więcej przykładów

Numeracja alfabetyczna, 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>
    <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>

Numeracja alfabetyczna, wielkie 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>
    <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>

Numeracja rzymska, małe litery

<ol type="i">
    <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>

Numeracja rzymska, wielkie litery

<ol type="I">
    <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>

Numeracja odwrotna

<ol reversed="reversed">
    <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> 

Poniżej znajduje się bardziej szczegółowy artykuł na temat elementu ol autorstwa Oliego Studholme’a.

Element ol i powiązane z nim atrybuty

Element ol w HTML 5 ma nowy atrybut — reversed. Przywrócone zostały również niektóre z atrybutów wcześniej usuniętych w języku HTML 4. Są to: start i type dla elementu ol oraz value dla elementu li. Co ciekawsze te przywrócone atrybuty zostały usunięte z języka HTML 4 jako prezentacyjne. Dlaczego je przywrócono? Odpowiedź poniżej.

Prezentacja a semantyka

Jak wiadomo warstwa prezentacji to domena CSS, a nie HTML. Własność list-style-type zastąpiła atrybut type języka HTML 4.01, natomiast atrybuty start i value zostały opuszczone i można je jedynie zastąpić w niektórych przypadkach licznikami CSS. Dlaczego zatem mielibyśmy chcieć określać własności prezentacyjne list za pomocą HTML-a?

Atrybut type

Podczas gdy styl licznika listy uporządkowanej jest ogólnie rzecz biorąc prezentacyjny, to jednak w niektórych dokumentach może być on częścią semantyki dokumentu, na co wskazują zapisy w dokumentacji na temat tego atrybutu.

Atrybutu type można używać do określenia rodzaju znacznika, który ma być użyty w liście, w przypadkach, gdy ma to jakieś znaczenie (np. w treści dokumentu są odwołania do liczb/liter poszczególnych elementów).

— Obecne standardy języka HTML WHATWG

Poniższe przykłady dotyczą dokumentów urzędowych oraz technicznych:

Obowiązki firmy — Transza Pierwsza

3.3 Stosownie do punktu 3.2(a) po zakończeniu pierwszej transzy firma:
(a) zakupi stół z piłkarzykami dla personelu
(b) …

Przykład dokumentu urzędowego ze zwróceniem uwagi na odniesienie do elementu listy o niedziesiętnym numerze.

Styl listy możemy określić używając atrybutu type z następującymi wartościami:

Należy podkreślić, że nie jest to pełna alternatywa dla wartości list-style-type, ponieważ tylko tych pięć stylów listy jest dostępnych, podczas gdy CSS2.1 określa ich jedenaście dla elementu ol. Jeśli używane są liczniki dziesiętne albo brak odniesień do numerów liczników w tekście powinno się używać CSS zamiast atrybutu type. Jeśli jednak licznik listy pełni rolę semantyczną, to należy go utworzyć za pomocą HTML-a. Zauważ, że własność list-style-type przesłoni wartości atrybutu type, zatem atrybut ten zadziała tylko wtedy, jeżeli nie zostanie określony typ listy za pomocą własności list-style-type.

Atrybuty start i value

Atrybut start umożliwia nam ustawienie pierwszej pozycji licznika. Jest to wygodne wtedy, gdy trzeba utworzyć listę podzieloną na kilka części i chcemy mieć możliwość kontynuowania numeracji od miejsca, w którym została zakończona poprzednia lista. Atrybutu value używa się dla elementów li, co umożliwia ręczne numerowanie elementów listy. Atrybut value zdefiniowany dla pierwszego elementu nadpisuje atrybut start. Następny element li bez atrybutu value będzie zwiększał poprzedni atrybut value o jeden.

Pierwszy element na liście ma liczbę porządkową określoną przez atrybut start elementu ol, chyba że elementli będzie miał poprawnie zdefiniowany atrybut value, w którym to przypadku elementowi temu zostanie przypisana wartość określona właśnie w tym atrybucie value. — Obecne standardy języka HTML WHATWG

Oto przykład sposobu użycia atrybutów start, value i type:

<!-- Kontynuacja wcześniejszej listy z value="" -->
<ol type="I">
  <li value="7">siódmy element listy</li>
  <li>ósmy element listy</li>
  <li>dziewiąty element listy</li>
</ol>
<!-- Kontynuacja wcześniejszej listy start="" -->
<ol type="I" start="7">
  <li>siódmy element listy</li>
  <li>ósmy element listy</li>
  <li>dziewiąty element listy</li>
</ol>

7. siódmy element listy (przy zastosowaniu <li value=”7″>)
8. ósmy element listy
9. dziewiąty element listy

7. siódmy element listy (przy zastosowaniu <ol start=”7″>)
8. ósmy element listy
9. dziewiąty element listy

Użycie atrybutów value i start w celu kontynuowania poprzedniej listy składającej się z sześciu elementów.

Te dwa atrybuty dają nam większą kontrolę nad numerowaniem, jednak wadą ich stosowania jest to, że listy tworzone przy ich użyciu mogą wyglądać jakby były źle skonstruowane. Dlatego dobrze jest też zapoznać się z tajnikami liczników CSS. Być może będziesz chciał użyć liczników CSS do tworzenia zagnieżdżonych list typu „1.1.1.”

Sortowanie malejące przy użyciu atrybutu reversed

Atrybut reversed umożliwia utworzenie uporządkowanej listy z sortowaniem malejącym. Jeżeli kodujesz listę składającą się z 210 elementów i uporządkowaną malejąco albo masz jakiś dziwny fetysz, to ten atrybut jest w sam raz dla Ciebie.

Atrybut reversed jest atrybutem logicznym, tzn. jego obecność oznacza, że lista jest uporządkowana malejąco (…3, 2, 1).

Domyślnie ol reversed rozpoczyna odliczanie od sumy wszystkich elementów i liczy do jedynki, zatem nie ma potrzeby określania atrybutu start, dopóki nie zechcesz wprowadzić jakichś zmian. Niestety jak za moment zobaczymy w tabeli obsługi atrybutów przez przeglądarki, żadna z nich jeszcze tego nie obsługuje, zatem w międzyczasie możesz ustawić listę z atrybutem reversed ręcznie, określając każdą pozycję elementu listy przy użyciu atrybutu value (zobacz poniższy przykład) lub liczników CSS.

<!-- lista domyślna -->
<ol>
  <li>trzy</li>
  <li>dwa</li>
  <li>jeden</li>
</ol>
<!-- użycie atrybutu reversed (w obsługującej go przeglądarce będzie to wyglądało tak samo jak trzecia z poniższych list) -->
<ol reversed>
  <li>trzy</li>
  <li>dwa</li>
  <li>jeden</li>
</ol>
<!-- użycie atrybutów value w elementach li -->
<ol>
  <li value="3">trzy</li>
  <li value="2">dwa</li>
  <li value="1">jeden</li>
</ol>

1. trzy
2. dwa
3. jeden

1. trzy
2. dwa
3. jeden

3. trzy
2. dwa
1. jeden

Normalna uporządkowana lista, uporządkowana lista z atrybutem reversed oraz uporządkowana lista z każdym elementem numerowanym ręcznie poprzez użycie atrybutu value

Wnioski

Nie są to atrybuty, których będziesz często używać, ale mogą się okazać przydatne. Pomogą Ci one uniknąć numerowania elementów listy, jako części zawartości (prowadząc do podwójnego numerowania, jeżeli w arkuszu stylów nie będzie deklaracji list-style-type: none;), stosowania brzydkich sztuczek typu ustawienie height:0; dla kilku elementów li, aby uzyskać odpowiednią wartość początkową. Najlepsze jest to, że atrybuty type, start i value są już obsługiwane i gotowe do użycia.

Teraz jak zwykle należy upewnić się, że używasz ich w odpowiednim miejscu:

• Atrybutu type należy używać tylko wtedy, gdy styl listy dla liczników ma wartość semantyczną a znaczenie dokumentu się zmieni, jeśli CSS (zawierając odpowiednie wartości list-style-type) się nie załaduje.
• Zastanów się czy w przypadku atrybutu start ma to być lista mieszana.
• O ile to możliwe, należy unikać atrybutu value, ponieważ numerowanie przez przeglądarkę jest o wiele bardziej niezawodne od ręcznego ustawiania numeracji.
• Niestety obecny brak obsługi przez przeglądarki oznacza, że będzie istniała konieczność użycia wypełniacza w celu uzupełnienia obsługi atrybutu reversed.

Co myślisz o tych nowych atrybutach? Potrzebowałeś ich w przeszłości? Używałeś niektórych z nich, jako „starej szkoły programowania” w języku HTML 3.2? Użyjesz ich w przyszłości? Daj nam znać w komentarzach.