Lista numerowana w HTML

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Lista numerowana w HTML — co to jest?

Lista numerowana w HTML to lista, w której elementy są automatycznie numerowane (1, 2, 3…). Tworzy się ją znacznikiem <ol> (od ang. ordered list — lista uporządkowana), a każdy element listy umieszcza się w znaczniku <li> (list item).

Infografika: lista numerowana w HTML — znacznik ol z elementami li, atrybuty type, start i reversed do sterowania numeracją oraz porównanie z listą nienumerowaną ul i listą definicji dl

Listę numerowaną stosuje się tam, gdzie kolejność elementów ma znaczenie — w odróżnieniu od listy nienumerowanej <ul>, gdzie kolejność jest dowolna. To jeden z podstawowych tematów z kwalifikacji INF.03 (Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych).

Podstawowa składnia

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

W przeglądarce wyświetli się jako:

Pierwszy
Drugi
Trzeci

Numerowanie jest automatyczne — nie wpisuje się cyfr ręcznie. Przeglądarka sama numeruje kolejne <li>.

Znaczniki listy numerowanej

Znacznik	Pełna nazwa	Funkcja
`<ol>`	ordered list	cała lista numerowana (kontener)
`<li>`	list item	pojedynczy element (pozycja) listy

Znacznik <li> jest wspólny dla list numerowanych <ol> i nienumerowanych <ul>.

Kiedy stosować listę numerowaną?

Znacznika <ol> używa się, gdy kolejność ma znaczenie:

instrukcja wykonania zadania (krok po kroku),
przepis kulinarny,
ranking (miejsca 1, 2, 3),
lista kroków algorytmu,
plan działań w ustalonej kolejności,
spis treści z numeracją rozdziałów.

Jeśli kolejność nie ma znaczenia (np. lista składników, cech, zalet) — używa się listy nienumerowanej <ul>.

Atrybut type — rodzaj numeracji

Domyślnie lista numeruje się cyframi arabskimi (1, 2, 3). Atrybut type zmienia sposób numeracji:

<ol type="A">
  <li>Punkt pierwszy</li>
  <li>Punkt drugi</li>
</ol>

Wartość	Numeracja	Przykład
`type="1"`	liczby arabskie (domyślnie)	1, 2, 3
`type="A"`	wielkie litery	A, B, C
`type="a"`	małe litery	a, b, c
`type="I"`	wielkie liczby rzymskie	I, II, III
`type="i"`	małe liczby rzymskie	i, ii, iii

Atrybut start — początek numeracji

Atrybut start określa, od jakiej wartości zacząć numerowanie:

<ol start="5">
  <li>Piąty</li>   <!-- 5 -->
  <li>Szósty</li>  <!-- 6 -->
</ol>

Lista zacznie się od 5, a nie od 1. Przydatne, gdy lista jest kontynuacją wcześniejszej.

Atrybut reversed — numeracja malejąca

Atrybut reversed odwraca kolejność numerowania (od największej do najmniejszej):

<ol reversed>
  <li>Trzeci</li>  <!-- 3 -->
  <li>Drugi</li>   <!-- 2 -->
  <li>Pierwszy</li><!-- 1 -->
</ol>

Przydatne np. w rankingach typu „odliczanie" (3, 2, 1).

Atrybut value — numer konkretnego elementu

Atrybut value na <li> ustawia konkretny numer danej pozycji (kolejne liczone są od niej):

<ol>
  <li>Pierwszy</li>          <!-- 1 -->
  <li value="10">Dziesiąty</li> <!-- 10 -->
  <li>Jedenasty</li>         <!-- 11 -->
</ol>

Listy zagnieżdżone

Listę numerowaną można zagnieżdżać wewnątrz innej listy (numerowanej lub nienumerowanej) — wystarczy umieścić <ol> wewnątrz <li>:

<ol>
  <li>Rozdział pierwszy
    <ol type="a">
      <li>podpunkt a</li>
      <li>podpunkt b</li>
    </ol>
  </li>
  <li>Rozdział drugi</li>
</ol>

Zagnieżdżona lista tworzy hierarchię — przydatne w spisach treści i strukturach wielopoziomowych.

Stylowanie listy numerowanej (CSS)

Wygląd numeracji można zmienić w CSS właściwością list-style-type:

ol {
  list-style-type: upper-roman; /* I, II, III */
}

/* inne wartości: decimal, lower-alpha, upper-alpha,
   lower-roman, upper-roman, decimal-leading-zero */

Można też całkowicie usunąć numerację (list-style: none) lub zmienić wcięcie i odstępy.

Trzy rodzaje list w HTML

To kluczowe rozróżnienie egzaminacyjne:

Znacznik	Typ listy	Tworzy
`<ol>`	numerowana (ordered)	1, 2, 3 / A, B, C / I, II, III
`<ul>`	nienumerowana (unordered)	wypunktowanie: •, ◦, ▪
`<dl>`	definicji (description)	pary termin–opis

Elementy <ol> i <ul> oznacza się znacznikiem <li>, a w <dl> używa się pary <dt> + <dd>.

Więcej w hasłach lista nienumerowana w HTML i lista definicji w HTML.

Typowe odpowiedzi egzaminacyjne

Pytanie	Odpowiedź
Znacznik listy numerowanej	`<ol>`
Znacznik listy nienumerowanej	`<ul>`
Znacznik listy definicji	`<dl>`
Element listy `<ol>` / `<ul>`	`<li>`
Atrybut rodzaju numeracji	`type`
Numeracja od konkretnej liczby	`start`
Numeracja malejąca	`reversed`

Częste pomyłki — nie myl tego!

<ol> ≠ <ul> — <ol> numeruje (kolejność ważna), <ul> wypunktowuje kropkami (kolejność dowolna).
<ol> to nie <li> — <ol> to cała lista, <li> to pojedynczy element w środku.
numeracji nie wpisuje się ręcznie — przeglądarka numeruje automatycznie kolejne <li>.
type na <ol> ≠ type na <input> — w <ol> zmienia numerację, w formularzu typ pola.
type="1" (cyfra w cudzysłowie), nie type=1 bez cudzysłowu w poprawnym kodzie.
<ol> bez <li> nic nie pokaże — elementy muszą być w <li>.
list-style-type to CSS, atrybut type to HTML — robią podobne rzeczy, ale to różne mechanizmy.

Najważniejsze do zapamiętania

Lista numerowana w HTML to <ol> (ordered list), z elementami w <li>. Stosuje się ją, gdy kolejność ma znaczenie (instrukcje, rankingi, kroki). Sposób numeracji zmienia atrybut type (1, A, a, I, i), początek — start, a kierunek — reversed. Razem z <ul> (nienumerowana) i <dl> (definicji) tworzą trzy typy list w HTML. Element listy <ol> i <ul> to zawsze <li>.