Jak numerować w HTML?

Numerowanie w HTML – jak tworzyć uporządkowane listy

W HTML numerowanie realizuje się przede wszystkim za pomocą elementów listy numerowanej, czyli znaczników <ol> oraz <li>. Pozwalają one tworzyć uporządkowane wykazy, w których każdy punkt otrzymuje automatycznie kolejny numer lub literę. Lista numerowana jest często wykorzystywana do prezentowania instrukcji krok po kroku, rankingów, punktów procesu, spisów treści i wszędzie tam, gdzie kolejność ma znaczenie.

Podstawowa lista numerowana

Aby utworzyć prostą listę numerowaną, należy użyć następującego kodu:

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

W efekcie przeglądarka wyświetli:

1. Pierwszy element listy
2. Drugi element listy
3. Trzeci element listy

Zmiana stylu numeracji (atrybut type)

Możesz wybrać inny typ numeracji za pomocą atrybutu type w znaczniku <ol>. Dostępne opcje to:

• 1 – liczby (domyślnie);
• A – wielkie litery (A, B, C…);
• a – małe litery (a, b, c…);
• I – wielkie cyfry rzymskie (I, II, III…);
• i – małe cyfry rzymskie (i, ii, iii…).

Przykłady:

<ol type="A">
  <li>Punkt A</li>
  <li>Punkt B</li>
  <li>Punkt C</li>
</ol>
<ol type="i">
  <li>Punkt i</li>
  <li>Punkt ii</li>
  <li>Punkt iii</li>
</ol>

Rozpoczęcie numerowania od wybranego numeru (atrybut start)

Jeśli chcesz, żeby numeracja zaczynała się od innej liczby (np. od 4), użyj atrybutu start:

<ol start="4">
  <li>Czwarty element</li>
  <li>Piąty element</li>
  <li>Szósty element</li>
</ol>

Wyświetli się:

4. Czwarty element
5. Piąty element
6. Szósty element

Pamiętaj: wartość start zawsze musi być liczbą, nawet gdy używasz liter lub cyfr rzymskich.

Zmiana numeracji pojedynczego elementu (atrybut value)

Aby zmienić numer danego punktu listy w trakcie numeracji, można zastosować atrybut value bezpośrednio w elemencie <li>:

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

W tym przykładzie lista wyświetli się jako:

1. Punkt pierwszy
2. Punkt piąty
3. Punkt szósty

Zagnieżdżanie list numerowanych i wypunktowanych

Listy w HTML mogą być wielopoziomowe. Aby zagnieździć jedną listę wewnątrz drugiej, wstaw kolejną <ol> lub <ul> wewnątrz <li>:

<ol>
  <li>Punkt główny
    <ol type="a">
      <li>Punkt podrzędny a</li>
      <li>Punkt podrzędny b</li>
    </ol>
  </li>
  <li>Kolejny punkt główny</li>
</ol>

Efektem będzie numerowana lista główna z podrzędną numerowaną listą w stylu literowym.

Typowe zastosowania list numerowanych w HTML

• kolejność czynności w instrukcjach (np. przepisy, poradniki, checklisty),
• rankingi, zestawienia (np. top 10, najlepsze filmy roku),
• spisy treści artykułów, rozdziałów książek,
• ankiety, listy pytań składające się z kilku sekcji,
• opisy procesów wymagających zachowania kolejności działań.

Najważniejsze fakty i zalecenia

• Do numeracji zawsze używaj <ol> z <li> – to rozwiązanie dostępne, czytelne dla czytników ekranu i proste w użyciu;
• Unikaj ręcznego wpisywania numerów – one zostaną zliczone automatycznie;
• Możesz zmienić styl numeracji oraz punkt startowy numeracji za pomocą prostych atrybutów;
• Zagnieżdżaj listy, gdy potrzebujesz przedstawić podpunkty w strukturze wielopoziomowej;
• W razie potrzeby stosuj atrybut value, aby dostosować numer kolejnego punktu bez przerywania listy.

Stosując te techniki zyskujesz elastyczność i pełną kontrolę nad numerowaniem w HTML – zgodnie z wymaganiami projektowymi i semantyką nowoczesnych stron internetowych.