Listy nienumerowane <ul> i numerowane <ol> w HTML - Jak zrobić listę HTML?
Listy, tabele, linki i obrazki to jedne z najczęściej używanych elementów strony WWW — i jednocześnie te, które potrafią sprawiać najwięcej drobnych problemów w praktyce. Nawet jeśli na co dzień korzystasz z gotowych bloków (WordPress/Gutenberg, Elementor i podobne), podstawowa znajomość HTML dalej się przydaje: gdy chcesz wstawić brakujący element, poprawić strukturę treści albo „dopiąć” coś ponad to, co przewiduje dany blok.
- Listy HTML: rodzaje i rola na stronie
- Listy HTML: tworzenie i konfiguracja (krok po kroku)
- Rozbudowana lista HTML z linkami (praktyczne przykłady)
W tym poradniku skupimy się na listach HTML: numerowanych i nienumerowanych. To świetne narzędzie do porządkowania informacji, ale też do budowania prostych sekcji typu: „zalety”, „kroki instrukcji” czy nawet ręcznie robionego mini spisu treści w artykule (lista linków do nagłówków).
Listy HTML: rodzaje i rola na stronie
W najprostszej wersji masz dwa podstawowe typy list:
<ul>– lista nienumerowana (punkty, wypunktowanie).<ol>– lista numerowana (kolejne kroki, kolejność ma znaczenie).
W obu przypadkach elementy listy zapisujesz jako <li> (list item). Dobrą zasadą wyboru jest proste pytanie: jeśli przestawisz elementy, czy lista nadal ma sens? Jeśli tak — zwykle wybierasz <ul>, a jeśli kolejność jest istotna (instrukcja, proces) — <ol>.
Warto też wiedzieć, że oprócz <ul> i <ol> istnieje trzeci typ: lista opisowa <dl> z parami <dt> i <dd> (np. słowniczek pojęć, FAQ, termin → opis). W tym poradniku skupimy się jednak na dwóch najczęstszych: <ul> i <ol>.
Listy HTML: tworzenie i konfiguracja (krok po kroku)
Przejdźmy w takim razie do konkretów. Poniżej znajdziesz podstawową konfigurację listy:
1) Lista nienumerowana <ul> – najprostsze wypunktowanie
<ul>
<li>Hosting SSD</li>
<li>Darmowy certyfikat SSL</li>
<li>Wsparcie 24/7</li>
</ul>To format idealny do list cech, punktów „do zapamiętania” i krótkich podsumowań.
2) Lista numerowana <ol> – gdy kolejność ma znaczenie
<ol>
<li>Wejdź do panelu administracyjnego.</li>
<li>Otwórz edycję wpisu.</li>
<li>Wstaw listę i zapisz zmiany.</li>
</ol>To najlepszy wybór do instrukcji i procedur krok po kroku.
3) Zagnieżdżanie list (lista w liście)
Jeśli chcesz zrobić strukturę „temat → podpunkty”, możesz wstawić nową listę wewnątrz elementu <li>.
<ul>
<li>Owoce
<ul>
<li>Jabłka</li>
<li>Banany</li>
</ul>
</li>
<li>Warzywa</li>
</ul>4) Konfiguracja listy numerowanej: start od innego numeru (atrybut start)
Jeśli wstawiasz fragment instrukcji „od kroku 4”, przydaje się atrybut start.
<ol start="4">
<li>Sprawdź ustawienia.</li>
<li>Zapisz konfigurację.</li>
</ol>5) Zmiana stylu numeracji (atrybut type)
W HTML możesz kontrolować wygląd numeracji za pomocą atrybutu type (cyfry, litery, cyfry rzymskie).
<!-- Domyślnie: 1, 2, 3... -->
<ol type="1">
<li>Punkt</li>
<li>Punkt</li>
</ol>
<!-- małe litery: a, b, c... -->
<ol type="a">
<li>Punkt</li>
<li>Punkt</li>
</ol>
<!-- wielkie litery: A, B, C... -->
<ol type="A">
<li>Punkt</li>
<li>Punkt</li>
</ol>Rozbudowana lista HTML z linkami (praktyczne przykłady)
Skoro wiesz już, jak działają listy, czas przejść do praktyki: bardzo często lista nie jest „gołym tekstem”, tylko mieszaniną zwykłych punktów oraz pozycji, które prowadzą do innych podstron. Robi się to przez wstawienie linku <a href="..."> wewnątrz elementu <li>.
Przykład 1: lista mieszana (teksty + linki zewnętrzne)
<ul>
<li>Nasza oferta:</li>
<li><a href="https://seohost.pl/hosting" title="Poznaj naszą ofertę szybkiego i bezpiecznego hostingu WWW dopasowanego do Twoich potrzeb">Hosting WWW</a></li>
<li><a href="https://seohost.pl/vps" title="Sprawdź wydajne serwery VPS zapewniające pełną kontrolę i skalowalność Twoich projektów">Serwery VPS</a></li>
<li>Skontaktuj się z nami, jeśli nie wiesz co wybrać</li>
</ul>Przykład 2: lista jako mini spis treści (kotwice wewnątrz artykułu)
Kotwice robi się dziś przez przypisanie id do elementu docelowego (np. nagłówka), a link w liście wskazuje na ten identyfikator przez href="#id".
<!-- Spis treści -->
<ul>
<li><a href="#listy-ul" title="Dowiedz się więcej o strukturze i zastosowaniu list nienumerowanych ul">Listy nienumerowane (ul)</a></li>
<li><a href="#listy-ol" title="Sprawdź jak poprawnie tworzyć listy numerowane ol i zarządzać ich kolejnością">Listy numerowane (ol)</a></li>
<li><a href="#zagniezdzanie" title="Naucz się tworzyć wielopoziomowe struktury poprzez zagnieżdżanie list wewnątrz innych list">Zagnieżdżanie list</a></li>
</ul>
<!-- Treść artykułu z identyfikatorami -->
&h2 id="listy-ul">Listy nienumerowane (ul)</h2>
<p>Treść sekcji...</p>
&h2 id="listy-ol">Listy numerowane (ol)</h2>
<p>Treść sekcji...</p>
&h2 id="zagniezdzanie">Zagnieżdżanie list</h2>
<p>Treść sekcji...</p>Pamiętaj, że id w dokumencie powinno być unikalne (jedno id przypada na jedno miejsce, do którego skacze link).
Przeczytaj więcej o HTML
Jeśli chcesz rozwinąć temat i szybko przejść do praktycznych przykładów, oto kilka powiązanych poradników:
- HTML — co to jest i do czego służy? (krótkie wprowadzenie) – Dla osób, które chcą zrozumieć, czym jest HTML i jaką ma rolę na stronach WWW.
- Podstawy HTML: najważniejsze znaczniki i elementy, które warto znać – Szybka lista bazowych znaczników przydatnych w edycji treści i prostych sekcji strony.
- Jak utworzyć link HTML mailto, żeby użytkownik kliknął i wysłał e‑mail – Instrukcja tworzenia odnośników typu „Napisz do nas” (mailto) w HTML.
- Jak wstawić obraz w HTML (img, alt, rozmiar) i nie popełnić typowych błędów – Praktyczny poradnik o wstawianiu grafiki oraz atrybutach, które warto ustawić od razu.
- Podstawy tworzenia tabel w HTML: od prostej tabeli po poprawną strukturę – Dla tych, którzy chcą prezentować dane w wierszach i kolumnach w sposób czytelny.
- Skuteczne linki HTML pod SEO: atrybuty, struktura i kotwice w treści – O tym, jak budować linkowanie (także wewnętrzne) i kotwice, żeby było użyteczne i uporządkowane.