Znacznik ol, czyli jak zrobić listę numerowaną w HTML, zwaną również uporządkowaną

redakcja | 17.03.2021 21:49

Listę numerowaną utworzymy w HTML za pomocą znacznika <ol>, czyli ordered list, gdzie poszczególne elementy są oznaczane za pomocą elementów <li>,tak samo jak w przypadku listy wypunktowanej <ul>.

Lista numerowana, ilustracja do artykułu
Lista numerowana, ilustracja do artykułu | Prostock-studio, envato

Przykładowy kod listy uporządkowanej ma postać:

<ol>

<li>jabłka</li>

<li>pomarańcze</li>

<li>brzoskwinie</li>

</ol> 

Wyrenderowana lista ol wygląda jak poniżej:

  1. jabłka
  2. pomarańcze
  3. brzoskwinie

Jak rozpocząć numerowanie listy <ol> od innej liczby?

Często istnieje konieczność rozpoczęcia numerowania listy nie od 1, a np. od 3. Zrobisz to za pomocą atrybutu start, kod powinien mieć postąć <ol start=”3”>

Jak zmienić numerowanie listy ol w trakcie?

Jeśli chcesz mienić numerowanie listy ol w trakcie, np. pominąć liczbę 13, to musisz użyć atrybutu value przy elemencie <li>.

<ol>

<li>Punkt pierwszy</li>

<li value="10">Punkt dziesiąty</li>

<li>Punkt jedenasty</li>

</ol>

Lista numerowana <ol> vs SEO

Grupowanie treści za pomocą list ol(tak samo ul) oprócz porządkowania treści w przystępny sposób, może pomóc Ci znaleźć się w wynikach zero, czyli tzw. featured snippet (fragment z odpowiedzią). Przeczytaj więcej o featured snippet.  

wynik zerozrzut ekranu dla pozycji zero, fraza "lista szczytów w Polsce" | wynik zero

Czy listę <ol> można zagnieżdżać?

Tak, nie ma z tym najmniejszego problemu. Wszystkie listy w HTML, można dowolnie zagnieżdżać, pozwalają na to przeglądarki oraz jest to zgodne ze specyfikacją języka HTML5 oraz HTML4. 

Proponowane artykuły