Jak zrobić listę numerowaną w HTML?

Aby utworzyć listę numerowaną w HTML, należy zastosować znacznik <ol>, a każdy element listy umieszcza się w tagu <li>. Lista numerowana (ang. ordered list) automatycznie nadaje każdemu punktowi kolejne numery lub litery, w zależności od konfiguracji.

Podstawowa składnia listy numerowanej

<ol>
  <li>Pierwszy punkt</li>
  <li>Drugi punkt</li>
  <li>Trzeci punkt</li>
</ol>

Efekt w przeglądarce:

1. Pierwszy punkt
2. Drugi punkt
3. Trzeci punkt

Zmiana stylu numeracji

HTML umożliwia zmianę domyślnego sposobu numerowania poprzez atrybut type w tagu <ol>. Możliwe wartości to m.in.:

• „1” – liczby arabskie (domyślnie);
• „I” – wielkie cyfry rzymskie;
• „i” – małe cyfry rzymskie;
• „A” – wielkie litery;
• „a” – małe litery.

Przykłady:

<!-- Lista z cyframi rzymskimi -->
<ol type="I">
  <li>Punkt pierwszy</li>
  <li>Punkt drugi</li>
</ol>
<!-- Lista z małymi literami -->
<ol type="a">
  <li>Punkt pierwszy</li>
  <li>Punkt drugi</li>
</ol>

Efekt:

I. Punkt pierwszy
II. Punkt drugi

a. Punkt pierwszy
b. Punkt drugi

Numerowanie niestandardowe – atrybut „start”

Możesz wybrać, od jakiej liczby zaczyna się numeracja, stosując atrybut start w tagu <ol>:

<ol start="5">
  <li>Punkt piąty</li>
  <li>Punkt szósty</li>
</ol>

Efekt:

5. Punkt piąty
6. Punkt szósty

Listy zagnieżdżone (wielopoziomowe)

Lista numerowana może zawierać w sobie kolejną listę (uporządkowaną lub nieuporządkowaną):

<ol>
  <li>Krok pierwszy
    <ol type="a">
      <li>Podkrok 1</li>
      <li>Podkrok 2</li>
    </ol>
  </li>
  <li>Krok drugi</li>
</ol>

Efekt:

1. Krok pierwszy
   a. Podkrok 1
   b. Podkrok 2
2. Krok drugi

Zastosowania listy numerowanej

Typowe zastosowania list numerowanych na stronach internetowych to:

• Instrukcje krok po kroku;
• Listy obowiązków lub zadań do wykonania w określonej kolejności;
• Spisy treści;
• Rankingi i zestawienia;
• Listy punktowane ze wskazaną hierarchią ważności.

Zaawansowane formatowanie list za pomocą CSS

Jeśli domyślne typy numeracji są niewystarczające, dodatkowe formatowanie można osiągnąć przez CSS (np. niestandardowe liczby, style markerów). Najczęściej jednak do standardowych zastosowań wystarczy samo HTML i atrybuty <ol>.

Przykład kompleksowy

<ol type="I">
  <li>Przygotuj stanowisko pracy</li>
  <li>Wykonaj następujące zadania:
    <ol type="a">
      <li>Sprawdź sprzęt</li>
      <li>Uruchom komputer</li>
      <li>Zaloguj się do systemu</li>
    </ol>
  </li>
  <li>Rozpocznij pracę</li>
</ol>

Wynik w przeglądarce:

I. Przygotuj stanowisko pracy
II. Wykonaj następujące zadania:
a. Sprawdź sprzęt
b. Uruchom komputer
c. Zaloguj się do systemu
III. Rozpocznij pracę

Podsumowanie

Lista numerowana w HTML to uniwersalne narzędzie do przejrzystej prezentacji informacji, które wymagają zachowania kolejności. Do jej utworzenia wystarczy użyć znaczników <ol> i <li>, a dzięki atrybutom takim jak type i start można ją łatwo dostosować do własnych potrzeb.