Jak zrobić numerowanie w HTML?

Numerowanie w HTML – jak tworzyć uporządkowane listy

Aby utworzyć numerowanie w HTML, stosuje się element <ol>, który reprezentuje porządkowaną, czyli numerowaną listę. Każdy punkt tej listy definiuje się przy pomocy <li>. Poniżej znajdziesz szczegółowy poradnik pokazujący, jak korzystać z numerowania, jak zmieniać jego typ oraz jak tworzyć wielopoziomowe listy numerowane.

Podstawowe numerowanie – liczby arabskie (domyślne)

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

Taki kod wygeneruje listę numerowaną cyframi: 1, 2, 3….

Różne typy numerowania przy pomocy atrybutu type

Możesz zmienić sposób numerowania za pomocą atrybutu type wewnątrz znacznika <ol>. Dostępne opcje:

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

Przykłady:

<ol type="A">
  <li>Pierwszy punkt</li>
  <li>Drugi punkt</li>
  <li>Trzeci punkt</li>
</ol>
<!-- Efekt: A. B. C. ... -->

<ol type="a">
  <li>Pierwszy punkt</li>
  <li>Drugi punkt</li>
  <li>Trzeci punkt</li>
</ol>
<!-- Efekt: a. b. c. ... -->

<ol type="I">
  <li>Pierwszy punkt</li>
  <li>Drugi punkt</li>
  <li>Trzeci punkt</li>
</ol>
<!-- Efekt: I. II. III. ... -->

<ol type="i">
  <li>Pierwszy punkt</li>
  <li>Drugi punkt</li>
  <li>Trzeci punkt</li>
</ol>
<!-- Efekt: i. ii. iii. ... -->

Możesz wykorzystać te możliwości w zależności od kontekstu – np. numeracja rzymska sprawdzi się w wielopoziomowych spisach treści, a litery w podpunktach rozbudowanych list.

Kontrolowanie numeracji za pomocą atrybutu start

Chcesz, aby numerowanie nie zaczynało się od 1? Użyj atrybutu start:

<ol start="3">
  <li>Punkt trzeci</li>
  <li>Punkt czwarty</li>
</ol>
<!-- Efekt: 3. Punkt trzeci 4. Punkt czwarty -->

Tworzenie wielopoziomowych list numerowanych

Możesz budować zagnieżdżone listy numerowane, na przykład:

<ol type="I">
  <li>Pierwszy rozdział
    <ol type="1">
      <li>Pierwszy podpunkt
        <ol type="a">
          <li>Kolejny poziom
            <ul>
              <li>Wypunktowanie w numeracji</li>
              <li>Kolejne wypunktowanie</li>
            </ul>
          </li>
          <li>Następny element poziomu "a"</li>
        </ol>
      </li>
      <li>Drugi podpunkt</li>
    </ol>
  </li>
  <li>Drugi rozdział</li>
</ol>

Efektem będzie wielopoziomowa lista z kombinacją numeracji rzymskiej, arabskiej, literowej i wypunktowań.

Zastosowania numerowania w HTML

Numerowane listy przydają się w szczególności do:

• prezentowania rankingów lub zestawień (np. Top 10…),
• spisów treści, planów i rozdziałów,
• opisywania kolejnych kroków w instrukcjach,
• tworzenia FAQ z podziałem na pytania i odpowiedzi w ustalonej kolejności.

Przykład – spis treści artykułu

<ol type="I">
  <li>Wstęp</li>
  <li>Podstawy HTML
    <ol type="A">
      <li>Tworzenie dokumentu</li>
      <li>Struktura strony</li>
    </ol>
  </li>
  <li>Elementy zaawansowane</li>
</ol>

Podsumowanie funkcjonalności numerowania

• Stosuj <ol> do numerowanych list, <li> do poszczególnych punktów;
• Wybierz odpowiedni typ numerowania przez atrybut type;
• Ustal punkt początkowy za pomocą start;
• Twórz wielopoziomowe listy dla bardziej rozbudowanej struktury;
• Łącz numerowanie z wypunktowaniami dla większej przejrzystości.

Dzięki elastyczności elementu <ol> oraz możliwości modyfikowania jego działania (np. atrybutami i stylami CSS) można łatwo tworzyć zarówno proste, jak i bardzo złożone systemy numeracji dostosowane do wymagań dowolnej strony internetowej.