Listy w HTML to fundamentalne elementy struktury strony, które porządkują informacje i poprawiają skanowalność treści. Lista wypunktowana (nieuporządkowana, znacznik <ul>) używa markerów graficznych, natomiast lista numerowana (uporządkowana, znacznik <ol>) nadaje elementom automatyczną kolejność. Każdy element listy definiujemy znacznikiem <li>.
W tym przewodniku przejdziesz krok po kroku przez tworzenie obu typów list, ich zagnieżdżanie, personalizację za pomocą CSS oraz dobre praktyki SEO. Przykłady są gotowe do skopiowania i uruchomienia.
Podstawy list w HTML – znaczniki i struktura
<ul> – lista nieuporządkowana (wypunktowana), idealna do elementów bez znaczenia kolejności, np. list zakupów.
<ol> – lista uporządkowana (numerowana), właściwa, gdy kolejność ma znaczenie, np. instrukcje krok po kroku.
Struktura jest prosta: otwierający znacznik listy (<ul> lub <ol>), kolejne elementy <li> oraz zamykający znacznik (</ul> lub </ol>). Domyślnie przeglądarki stylują <ul> kropkami (disc), a <ol> liczbami arabskimi.
Krok 1 – tworzenie prostej listy wypunktowanej
Wykonaj te czynności, aby zbudować podstawową listę <ul>:
- W pliku HTML, w sekcji
<body>, wstaw następujący fragment:
<ul>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ul> - Zapisz plik jako
.htmli otwórz go w przeglądarce. Wynik: wypunktowana lista z czarnymi kropkami (disc) przed każdym elementem.
Krok 2 – tworzenie prostej listy numerowanej
Analogicznie zbudujesz listę <ol> z automatyczną numeracją:
- Dodaj kod:
<ol>
<li>Krok 1: Przygotuj składniki</li>
<li>Krok 2: Wymieszaj</li>
<li>Krok 3: Upiecz</li>
</ol> - Otwórz stronę w przeglądarce. Numeracja zaczyna się domyślnie od 1 (1., 2., 3.).
Zaawansowane opcje list – atrybuty i modyfikacje
Atrybut start w listach numerowanych
Aby rozpocząć numerację od wybranej wartości, użyj atrybutu start:
<ol start="5">
<li>Punkt piąty</li>
<li>Punkt szósty</li>
</ol>
Wynik: 5., 6.
Listy zagnieżdżone (podpunkty)
Zagnieżdżenie osiągniesz, umieszczając listę wewnątrz elementu <li> nadrzędnej listy:
<ul>
<li>Produkty
<ul>
<li>Jabłka</li>
<li>Banany</li>
</ul>
</li>
<li>Warzywa</li>
</ul>
Przeglądarka zwykle stosuje inny marker dla podlist (np. circle). Możesz mieszać <ul> i <ol> oraz zagnieżdżać je wielopoziomowo.
Personalizacja list za pomocą CSS
Domyślne style są podstawowe – zastosuj CSS, aby w pełni kontrolować wygląd markerów, wcięcia i odstępy. Dodaj reguły w sekcji <head> (blok <style>) lub w zewnętrznym pliku.
Krok po kroku: zmiana typu znacznika (właściwość list-style-type)
Właściwość list-style-type definiuje rodzaj markera. Najpopularniejsze wartości przedstawia poniższa tabela:
| Typ listy | Wartość dla <ul> |
Wartość dla <ol> |
Opis |
|---|---|---|---|
| Kołowy | disc |
decimal |
Domyślny pełny krąg / liczby arabskie |
| Pusty okrąg | circle |
decimal-leading-zero |
Puste okręgi / liczby z zerami (01, 02) |
| Kwadrat | square |
upper-roman |
Kwadrat / wielkie cyfry rzymskie |
| Brak | none |
lower-alpha |
Bez markerów / małe litery a, b, c |
Przykład ustawienia kwadratowych markerów dla wszystkich list nieuporządkowanych:
ul {
list-style-type: square;
}
Przykład nadania numeracji rzymskiej wielkimi literami dla list uporządkowanych:
ol {
list-style-type: upper-roman;
}
Pozycja znacznika (list-style-position)
Właściwość list-style-position przyjmuje wartości outside (domyślnie, marker poza blokiem) lub inside (marker wewnątrz bloku tekstu). Aby przenieść marker do środka, użyj:
ul {
list-style-position: inside;
}
Własność skrócona list-style
Łączy typ, pozycję i ewentualny obraz markera w jednej deklaracji:
ul {
list-style: square inside;
}
Aby całkowicie usunąć markery i wcięcia (częste w nawigacji), ustaw:
ul,
ol {
list-style: none;
padding-left: 0;
margin-left: 0;
}
Zmiana typu listy samym CSS-em
Możesz wymusić „numerowane” markery na <ul>:
ul {
list-style-type: decimal;
}
Uwaga: to zmiana czysto prezentacyjna — jeśli kolejność ma znaczenie, zawsze używaj semantycznego <ol> dla poprawnego SEO i dostępności.
Listy przyjazne SEO i najlepsze praktyki
Listy poprawiają czytelność i pomagają wyszukiwarkom zrozumieć strukturę treści. Najlepiej sprawdzają się w instrukcjach krok po kroku (<ol>) oraz przy wyliczaniu cech, opcji i składników (<ul>).
Porady SEO:
- używaj semantycznych znaczników
<ul>,<ol>,<li>– nie zastępuj ich<div>z CSS, - nie nadpisuj wbudowanych ról ARIA – dla
<ul>/<ol>nie dodawajrole="list", - w
<ol>zachowuj logiczny porządek – Google interpretuje takie listy jako sekwencje kroków.
Oto prosty przykład listy przyjaznej SEO:
<ol>
<li>Przygotuj składniki</li>
<li>Wymieszaj</li>
</ol>
Praktyczne przykłady i testowanie
Poniżej prosty układ menu z usuniętymi markerami i poziomym ułożeniem elementów:
<nav>
<ul style="list-style: none; display: flex; gap: 16px; margin: 0; padding-left: 0;">
<li><a href="#">Strona główna</a></li>
<li><a href="#">O nas</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
Przykład 2 – zagnieżdżona lista z własnymi stylami
Ten przykład różnicuje markery dla poziomu głównego i podlist:
<style>
ul { list-style-type: circle; }
ol ul { list-style-type: square; }
</style>
<ol>
<li>Krok główny
<ul>
<li>Podkrok 1</li>
<li>Podkrok 2</li>
</ul>
</li>
</ol>
Testuj kod w przeglądarce, aby szybko weryfikować efekty:
- utwórz plik
lista.html; - wklej wybrane przykłady;
- otwórz w Chrome lub Firefox;
- modyfikuj na żywo w DevTools (F12).
Częste błędy i rozwiązania
Poniżej znajdziesz typowe problemy oraz ich szybkie remedia:
- tekst poza
<li>– to niepoprawny HTML; umieszczaj całą zawartość listy wewnątrz elementów<li>; - brak znaczników zamykających – powoduje „psucie” struktury; zawsze domykaj
</ul>lub</ol>i każde</li>; - za głębokie zagnieżdżenia bez stylowania – domyślne wcięcia mogą obniżyć czytelność; kontroluj je CSS-em (np.
ul, ol { padding-left: 20px; }); - stylowanie markerów na
<li>– bywa niespójne; preferuj ustawienia na samym<ul>/<ol>(np.ol { list-style-type: upper-roman; }).
