Poznaj Programowanie

Tagi HTML: ul

Piotr Grochal 8 min. czytania

Cześć! W dzisiejszym wpisie na naszym blogu poświęconym programowaniu w HTML, CSS i JavaScript przyjrzymy się bliżej elementowi <ul>. To jeden z podstawowych tagów HTML, który wydaje się prosty, a jednocześnie daje ogromne możliwości tworzenia czytelnych, estetycznych list na stronach internetowych.

<ul> oznacza unordered list, czyli listę nieuporządkowaną – elementy nie są numerowane, a zamiast tego mają punktory, takie jak kropki, kwadraty czy okręgi. Idealnie nadaje się tam, gdzie kolejność nie ma znaczenia – np. lista zakupów, menu nawigacyjne czy cechy produktu.

Jeśli chcesz szybko i przejrzyście zorganizować treści, <ul> w połączeniu z <li> (element listy) to Twój najlepszy sprzymierzeniec. W tym przewodniku omówimy strukturę, przykłady użycia, stylizację CSS, zagnieżdżanie list oraz praktyczne sztuczki z JavaScriptem. Gotowy? Zaczynamy!

Podstawowa struktura elementu <ul>

Element <ul> jest kontenerem blokowym i musi zawierać co najmniej jeden element <li>. Znaczniki otwierające i zamykające są obowiązkowe, a listę możesz umieszczać w elementach treści ogólnej, takich jak <div>, <body> czy nawet wewnątrz <li>.

Oto prosty przykład podstawowej listy nieuporządkowanej prezentującej narzędzia warsztatowe:

<ul>
<li>klucz francuski</li>
<li>klucz oczkowy</li>
<li>śrubokręt</li>
<li>młotek</li>
<li>szczypce</li>
<li>piła</li>
<li>miernik uniwersalny</li>
</ul>

W przeglądarce ta lista wyświetli się z domyślnymi czarnymi kropkami (disc) jako punktorami. Przeglądarki zapewniają pełne wsparcie dla <ul> – w Chrome, Firefox, Edge, Safari i Operze.

Poniżej znajdziesz domyślne style CSS dla <ul> (zgodnie ze specyfikacją przeglądarek):

  • display: block;,
  • list-style-type: disc;,
  • margin-top: 1em; margin-bottom: 1em;,
  • padding-left: 40px;.

Domyślnie lista ma wcięcie z lewej i odstępy pionowe, co poprawia czytelność nawet bez dodatkowej stylizacji.

Różne typy punktorów – stylizacja inline i w CSS

W starszych wersjach HTML istniały atrybuty type="circle", type="disc" czy type="square", ale dziś są zdeprecjonowane. Zamiast nich używaj właściwości list-style-type, która oferuje ponad 20 wariantów punktorów.

Przykład różnych stylów punktorów (dla prostoty użyto stylu inline):

<ul style="list-style-type: circle;">
<li>Kawa</li>
<li>Herbata</li>
<li>Mleko</li>
</ul>

<ul style="list-style-type: disc;">
<li>Kawa</li>
<li>Herbata</li>
<li>Mleko</li>
</ul>

<ul style="list-style-type: square;">
<li>Kawa</li>
<li>Herbata</li>
<li>Mleko</li>
</ul>

Efekt? Pierwsza lista z pustymi okręgami, druga z pełnymi kropkami, trzecia z kwadratami. Możesz też użyć list-style-type: none;, aby usunąć punktory – to częsty zabieg w niestandardowych menu.

Zaawansowana stylizacja z zewnętrznym CSS – dodaj plik style.css z własnymi klasami:

.napojowa-lista {
list-style-type: square;
line-height: 180%; /* zwiększony odstęp między liniami */
color: navy; /* kolor tekstu */
}

.kompaktowa-lista {
line-height: 80%; /* zmniejszony odstęp */
padding-left: 20px;
}

Następnie w HTML użyj klasy:

<ul class="napojowa-lista">
<li>Kawa</li>
<li>Herbata</li>
<li>Mleko</li>
</ul>

Uwaga na kolory: jeśli ustawisz color na <ul>, właściwość zadziała również na <li>. Aby punktor był czerwony, a tekst czarny, zastosuj wewnętrzny element z innym kolorem:

<ul style="color: red;">
<li><span style="color: black;">Punktor czerwony, tekst czarny</span></li>
</ul>

Podobne zasady obowiązują dla <ol> (listy uporządkowanej) – pokażemy to w przykładzie porównawczym.

Zagnieżdżanie list – budowanie hierarchii

Jedna z najpotężniejszych cech <ul> to zagnieżdżanie list. Umieść <ul> wewnątrz <li>, aby tworzyć podlisty – idealne do menu wielopoziomowych czy struktury katalogów.

Prosty przykład zagnieżdżonej listy (napoje z podtypami):

<ul>
<li>Kawa</li>
<li>Herbata
<ul>
<li>Czarna herbata</li>
<li>Zielona herbata</li>
</ul>
</li>
<li>Mleko</li>
</ul>

Bardziej złożony przykład (herbaty z regionami):

<ul>
<li>Kawa</li>
<li>Herbata
<ul>
<li>Czarna herbata</li>
<li>Zielona herbata
<ul>
<li>Chiny</li>
<li>Afryka</li>
</ul>
</li>
</ul>
</li>
<li>Mleko</li>
</ul>

Domyślnie podlisty otrzymują inne typy punktorów (np. okręgi dla drugiego poziomu), ale możesz to w pełni kontrolować w CSS.

Praktyczny przykład użycia w menu nawigacyjnym:

<nav>
<ul>
<li>Strona główna</li>
<li>Produkty
<ul>
<li>Laptopy</li>
<li>Smartfony</li>
</ul>
</li>
</ul>
</nav>

<ul> a <ol> – kiedy używać każdej z list?

<ul> stosuj, gdy kolejność nie ma znaczenia (np. cechy, tagi, lista zakupów). <ol> wybierz, gdy porządek jest kluczowy (np. kroki instrukcji, rankingi, harmonogramy).

Przykład porównawczy:

<!-- Lista nieuporządkowana -->
<ul>
<li>Jabłka</li>
<li>Banany</li>
</ul>

<!-- Lista uporządkowana (litery duże) -->
<ol type="A">
<li>Krok 1: kup składniki</li>
<li>Krok 2: zmieszaj</li>
</ol>

Dla złożonej numeracji w <ol> możesz sięgnąć po CSS counter-reset i counter-increment.

Zaawansowane triki – CSS Flexbox, Grid i JavaScript

Responsywne menu z Flexbox – przykład podstawowego układu poziomego z efektem podświetlenia w stanie :hover:

.mega-menu {
display: flex;
list-style: none;
gap: 20px;
}

.mega-menu li:hover {
background: #f0f0f0;
padding: 10px;
}

Interaktywna lista (akordeon) w JavaScript – prosta funkcja przełączająca widoczność podlisty:

<ul id="accordion">
<li onclick="toggle(this)">Sekcja 1
<ul class="sub" style="display:none;">
<li>Podpunkt 1</li>
</ul>
</li>
</ul>

<script>
function toggle(element) {
const sub = element.querySelector('.sub');
sub.style.display = sub.style.display === 'none' ? 'block' : 'none';
}
</script>

Takie rozwiązanie świetnie sprawdzi się w FAQ lub katalogach treści.

Dostępność (a11y) – dobre praktyki

Pamiętaj o dostępności, by listy były wygodne w odbiorze dla wszystkich użytkowników:

  • Semantyka – używaj <ul> i <li> zgodnie z przeznaczeniem; nie nadużywaj list do samego pozycjonowania elementów,
  • Opis – w razie potrzeby dodaj aria-label lub nagłówek kontekstowy (np. <ul aria-label="Lista zakupów">),
  • Nawigacja – jeśli lista jest interaktywna (np. akordeon), zapewnij obsługę klawiatury i odpowiednie stany focus.

Kontekst użycia i najlepsze praktyki

Poniżej znajdziesz skrócone zasady, które pomogą Ci tworzyć lepsze listy:

  • Elementy potomne – dozwolone są wyłącznie <li>, <script> oraz <template>;
  • Miejsce w dokumencie – listy umieszczaj w sekcjach treści, np. w <body>, <div> czy zagnieżdżone w innych <li>;
  • Unikaj błędów – nie pomijaj </ul> i dbaj o poprawne domykanie elementów;
  • SEO i UX – listy poprawiają skanowalność treści, co ułatwia odbiór użytkownikom i wyszukiwarkom.

W praktyce <ul> to filar nawigacji, blogów i e‑commerce – testuj rozwiązania w narzędziach takich jak CodePen i stopniowo wzbogacaj je o CSS oraz JS.