Który znacznik definiuje listy w HTML?

W języku HTML do definiowania list służą przede wszystkim trzy znaczniki: <ul>, <ol> oraz <li>. Każdy z nich pełni inną funkcję i pozwala zorganizować treść w przejrzyste, logiczne struktury, wykorzystywane zarówno w nawigacji, jak i prezentacji informacji, instrukcji czy wypunktowań.

Podstawowe znaczniki do tworzenia list w HTML

1. <ul> — lista nieuporządkowana (wypunktowana);

   Znacznik <ul> (od unordered list) tworzy listy, w których elementy są poprzedzane punktorami (np. kropkami, kwadratami). Używa się go, gdy kolejność elementów nie ma znaczenia.

   Przykład –

   <ul>
     <li>Kawa</li>
     <li>Herbata</li>
     <li>Sok</li>
   </ul>
   

   Wynik:
   • Kawa
   • Herbata
   • Sok

2. <ol> — lista uporządkowana (numerowana);

   Znacznik <ol> (od ordered list) generuje listy, których elementy są numerowane. To odpowiedni wybór tam, gdzie ważna jest kolejność: instrukcje, kroki procedur czy rankingi.

   Przykład –

   <ol>
     <li>Krok pierwszy</li>
     <li>Krok drugi</li>
     <li>Krok trzeci</li>
   </ol>
   

   Wynik:

   1. Krok pierwszy
   2. Krok drugi
   3. Krok trzeci
3. <li> — element listy.

   Każdy element, niezależnie od typu listy, definiowany jest znacznikiem <li> (od list item). Musi być umieszczony bezpośrednio wewnątrz tagów <ul> lub <ol>.

   Przykład osadzenia <li> w <ul> –

   <ul>
     <li>Pierwszy punkt</li>
     <li>Drugi punkt</li>
   </ul>
   

Zaawansowane zastosowania list

• Listy zagnieżdżone (listy w listach) –
  HTML pozwala na osadzanie jednej listy wewnątrz elementu <li> innej listy. Umożliwia to budowanie rozbudowanych, hierarchicznych struktur, np. spisów treści czy menu.

  Przykład –

  <ol>
    <li>Dział pierwszy
      <ul>
        <li>Punkt a</li>
        <li>Punkt b</li>
      </ul>
    </li>
    <li>Dział drugi</li>
  </ol>
  

  Wynik:

  1. Dział pierwszy
     • Punkt a
     • Punkt b
  2. Dział drugi
• Dodatkowe typy list –
  Poza podstawowymi <ul> i <ol>, istnieje również znacznik <dl> (od definition list), który tworzy listy definicyjne. Składa się z par znaczników <dt> (definiowany termin) i <dd> (definicja):

  Przykład –

  <dl>
    <dt>HTML</dt>
    <dd>Język znaczników wykorzystywany do budowy stron internetowych</dd>
  </dl>
  

Podsumowanie kluczowych znaczników do list

Praktyczne wskazówki

• Listy poprawiają czytelność treści – warto je stosować do porządkowania informacji, procedur, zestawień czy menu nawigacyjnych;
• Dobrze dobrany typ listy (uporządkowana vs. nieuporządkowana) wpływa na przejrzystość przekazu i zgodność z zamierzonym celem prezentacji;
• Łączenie list oraz stosowanie stylów CSS pozwala uzyskać bardziej rozbudowane i atrakcyjne wizualnie efekty.

Warto regularnie korzystać ze znaczników <ul>, <ol> i <li> tam, gdzie naturalnie pojawia się wyliczenie lub zbiór powiązanych elementów, co pozytywnie wpływa na odbiór i strukturę treści w serwisie internetowym.