Jak tworzyć listy w HTML (<ul>, <ol>, <li>)

Listy w HTML służą do organizowania elementów w uporządkowanej (numerowanej) lub nieuporządkowanej (punktowanej) formie. Do tworzenia list używamy znaczników:

• <ul> (lista nieuporządkowana)
• <ol> (lista uporządkowana)
• <li> (element listy)

Znaczniki te posiadają różne atrybuty, które umożliwiają kontrolowanie wyglądu i zachowania list, takie jak typy numeracji czy określenie numeru początkowego.

<h2>Lista nieuporządkowana (ul)</h2>
<ul>
  <li>Jabłka</li>
  <li>Pomarańcze</li>
  <li>Banany</li>
</ul>

<h2>Lista uporządkowana (ol)</h2>
<ol>
  <li>Pierwszy krok</li>
  <li>Drugi krok</li>
  <li>Trzeci krok</li>
</ol>

   See the Pen    Untitled by EE-Informatyk.pl (@eeinformatyk)   on CodePen. 
 

Atrybuty dla listy uporządkowanej

Atrybuty dla parametru type - określa typ numeracji elementów listy uporządkowanej.

• a - Małe litery
• A - Wielkie litery
• i - Rzymskie małe litery
• I - Wielkie litery rzymskie

Atrybut dla parametru start - Określa numer początkowy, od którego ma się rozpocząć numeracja.

• start="3" - Pierwszy wyświetlony element będzie miał numeracje "3"

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Zagnieżdżone listy

Zagnieżdżone listy w HTML pozwalają na tworzenie hierarchicznej struktury elementów. Wewnątrz elementu <li> jednej listy można umieścić kolejną listę, co umożliwia grupowanie powiązanych ze sobą elementów. Zagnieżdżone listy mogą być zarówno uporządkowane (<ol>), jak i nieuporządkowane (<ul>), a także mogą zawierać różne typy list w obrębie jednego elementu.

<ul>
    <li>Owoce
        <ul>
            <li>Jabłka</li>
            <li>Pomarańcze</li>
            <li>Banany</li>
        </ul>
    </li>
    <li>Warzywa
        <ul>
            <li>Marchewki</li>
            <li>Brokuły</li>
            <li>Szpinak</li>
        </ul>
     </li>
</ul>

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Dobre praktyki:

• Pamiętaj, że listy w HTML mogą być zagnieżdżane, co pozwala na tworzenie bardziej złożonych struktur
• Możesz używać stylów CSS do pełnej personalizacji wyglądu list, w tym odstępów między elementami, kolorów punktów lub numerów, oraz ich układu.