Znacznik <ul> w HTML – zastosowanie, składnia i przykłady

Czym jest znacznik <ul> i kiedy stosować listę nieuporządkowaną

Znacznik <ul> w HTML tworzy listę nieuporządkowaną, czyli taką, w której kolejność elementów nie ma znaczenia. Każdy punkt umieszcza się osobno w znaczniku <li>. Przeglądarka domyślnie wyświetla takie elementy z punktorami, ale ich wygląd można zmienić za pomocą CSS.

Użyj listy <ul>, gdy chcesz przedstawić kilka równorzędnych informacji. Sprawdza się na przykład przy wypisywaniu składników przepisu, cech produktu lub elementów potrzebnych do wykonania zadania. Jeśli czytelnik może poznać te punkty w dowolnej kolejności, lista nieuporządkowana będzie właściwym wyborem.

• W opisie produktu: materiał, kolor, dostępne rozmiary.
• W instrukcji: wymagane narzędzia lub potrzebne składniki.
• W menu strony: odnośniki do równorzędnych podstron.

W rankingach, harmonogramach i instrukcjach krok po kroku kolejność ma znaczenie, dlatego stosuje się listę uporządkowaną <ol>. Warto znać https://zlepsy.pl/, by odróżnić ją od listy nieuporządkowanej. Nie wybieraj znacznika <ul> tylko po to, by uzyskać widoczne kropki: za prezentację odpowiada CSS, a HTML powinien opisywać strukturę i sens treści.

Poprawnie zbudowana lista ułatwia skanowanie tekstu i pomaga technologiom asystującym rozpoznać zestaw powiązanych punktów. Pamiętaj, by każdy element listy zapisać w <li>, a całość zamknąć znacznikiem </ul>. Dzięki temu kod pozostaje czytelny, a treść ma logiczną strukturę.

Składnia znacznika `

` oraz rola elementów `
• `

Znacznik <ul> służy do tworzenia listy nieuporządkowanej, czyli takiej, w której kolejność elementów nie ma kluczowego znaczenia. Może to być lista cech produktu, narzędzi, składników albo linków w menu. Każdy jej punkt powinien znajdować się wewnątrz osobnego znacznika <li>. Najprostsza konstrukcja wygląda tak:

<ul>
<li>Pierwszy element</li>
<li>Drugi element</li>
</ul>

Warto zapamiętać jedną zasadę: <li> jest elementem listy, a nie niezależnym zamiennikiem akapitu. Standard HTML zakłada, że znaczniki te występują jako dzieci <ul> albo <ol>. Dzięki temu przeglądarka poprawnie wyświetla punkty, a czytnik ekranu może przekazać użytkownikowi informację o liczbie elementów i strukturze treści.

Lista nieuporządkowana sprawdza się wtedy, gdy punkty można przeczytać w dowolnej kolejności, na przykład:

• lista funkcji aplikacji,
• zestaw produktów w kategorii,
• linki w nawigacji strony,
• krótkie zalecenia lub wymagania.

Jeśli kolejność ma znaczenie, lepszym wyborem będzie <ol>, czyli lista uporządkowana. Nie należy tworzyć listy za pomocą wielu akapitów i ręcznie wpisywanych myślników. Taki zapis może wyglądać podobnie, ale traci semantykę, utrudnia stylowanie i pogarsza dostępność. Wygląd punktatorów zmienisz w CSS, na przykład właściwością list-style-type, bez naruszania logicznej struktury dokumentu.

Przykłady użycia `

` w HTML: od prostych list po listy zagnieżdżone

Najprostsza lista sprawdzi się tam, gdzie kolejność elementów nie ma znaczenia. Na przykład na stronie przepisu możesz wymienić składniki: mąkę, mleko, jajka i sól. W HTML każdy składnik umieszczasz w osobnym elemencie <li>, a wszystkie pozycje obejmujesz tagami <ul> i </ul>.

Ten sam układ przydaje się w menu nawigacyjnym. Nazwy podstron są wtedy osobnymi pozycjami listy, często zawierającymi linki. Dzięki temu przeglądarka i technologie asystujące rozpoznają menu jako uporządkowaną grupę, a nie przypadkowy ciąg odnośników. Wygląd punktów możesz później zmienić w CSS.

Lista zagnieżdżona pozwala pokazać relacje między elementami. Wyobraź sobie listę kategorii produktów, w której „Komputery” ma pod sobą pozycje „Laptopy” i „Monitory”. Wystarczy umieścić kolejne <ul> wewnątrz właściwego elementu <li>. Zagnieżdżenie powinno wynikać ze struktury treści, a nie służyć wyłącznie do uzyskania dodatkowego wcięcia.

W kodzie pilnuj zamykania tagów i zachowuj czytelne wcięcia. Przy bardziej rozbudowanej liście łatwiej wtedy zauważyć, które pozycje należą do głównego poziomu, a które do podlisty. To drobny nawyk, który ułatwia późniejszą edycję i zmniejsza ryzyko błędów w strukturze HTML.

Stylowanie list nieuporządkowanych za pomocą CSS

Znaczniki i selektory

Lista nieuporządkowana w HTML korzysta ze znaczników <ul> i <li>. Jej wygląd zmienisz w CSS, nie ingerując w samą treść. Warto zacząć od selektora klasy, na przykład .menu, zamiast stylować każdą listę na stronie. Dzięki temu menu może mieć inne odstępy niż lista składników w artykule.

Własne znaczniki i odstępy

Za wygląd punktów odpowiada właściwość list-style-type. Wartość disc oznacza pełne kółko, circle puste, a square kwadrat. Jeśli punkty nie pasują do projektu, ustaw list-style: none i dodaj własny znacznik za pomocą pseudo-elementu ::before. Pamiętaj jednak, by nie zastępować nim informacji, która jest potrzebna do zrozumienia treści.

Odstępy ustawiaj świadomie. padding-left kontroluje wcięcie całej listy, a margin-bottom elementu li zwiększa przerwę między punktami. Przykładowo, niewielkie wcięcie i kilka pikseli odstępu poprawią czytelność dłuższych zestawień. Sprawdź też, jak tekst wygląda po zawinięciu do kolejnego wiersza; powinien pozostać wyrównany względem treści punktu, a nie znacznika.

Czytelność i dostępność

Przed wdrożeniem sprawdź kontrast, rozmiar tekstu i widok na wąskim ekranie. Nie usuwaj domyślnych punktów bez zapewnienia czytelnego zamiennika. Proste reguły CSS zwykle wystarczą, by lista pasowała do projektu, a nadal jasno pokazywała, że jej elementy tworzą grupę.

Dostępność, semantyka i dobre praktyki tworzenia list

Lista to nie tylko sposób na uporządkowanie tekstu. Jej rodzaj przekazuje czytelnikowi, jak rozumieć zawarte w niej informacje. Jeśli kolejność ma znaczenie, na przykład w instrukcji konfiguracji, wybierz listę numerowaną. Gdy elementy są równorzędne, lepsza będzie lista punktowana. W HTML używaj do tego odpowiednio znaczników <ol> i <ul>, a każdy element umieszczaj w <li>. Nie twórz list przez ręczne wpisywanie myślników ani numerów. Taki zapis może wyglądać podobnie, ale nie zapewnia tej samej semantyki.

Ma to praktyczne znaczenie dla dostępności. Czytniki ekranu rozpoznają listę, podają liczbę jej elementów i pozwalają sprawnie przechodzić między punktami. Użytkownik otrzymuje więc strukturę, a nie tylko ciąg zdań. Zadbaj też, by tekst każdego punktu jasno określał jego treść. Unikaj pojedynczych, niejasnych haseł, jeśli bez kontekstu trudno je zrozumieć.

Przy tworzeniu list warto pamiętać o kilku prostych zasadach:

• zachowuj równoległą formę punktów, na przykład zaczynaj je od czasowników lub rzeczowników;
• stosuj numerację tylko wtedy, gdy kolejność kroków jest istotna;
• nie dziel jednej myśli na wiele krótkich, powtarzających się punktów;
• dodaj zdanie wprowadzające, które wyjaśnia, czego dotyczy zestawienie.

Warto również sprawdzić listę na telefonie i przy powiększonym tekście. Długie punkty powinny zawijać się czytelnie, a odstępy ułatwiać skanowanie. Dobrze przygotowana lista pomaga szybko znaleźć potrzebną informację, niezależnie od sposobu czytania strony.

Najczęstsze błędy związane ze znacznikiem `

` i ich poprawianie

Lista nieuporządkowana wygląda prosto, ale łatwo użyć jej w niewłaściwym miejscu. Najczęstszy błąd to wpisanie tekstu bezpośrednio między znacznikami `

`. Każdy element listy powinien znajdować się w osobnym `
• `. Zamiast `
  Produkt A
  Produkt B

  ` użyj `

  • Produkt A
  • Produkt B

  `. Dzięki temu przeglądarka poprawnie odczyta strukturę, a czytnik ekranu rozpozna listę.

  Drugi problem to stosowanie `

  ` wyłącznie po to, by uzyskać wcięcie lub wypunktowanie. Jeśli treść nie jest zbiorem powiązanych elementów, lepiej zostawić zwykły akapit i ustawić wygląd w CSS. Nie warto też zastępować znaczników znakami „•” ani myślnikami. Takie znaki nie przekazują technologii asystującej informacji, że tekst jest listą.

  Przed publikacją sprawdź trzy rzeczy:

  1. Czy każdy element listy otwiera i zamyka znacznik `
  2. `?
  3. Czy lista zaczyna się od `
     ` i kończy na `

     `?

  4. Czy zagnieżdżona lista znajduje się wewnątrz elementu `
  5. ` nadrzędnej listy?

  Przykład poprawnego zagnieżdżenia: `

  • Warzywa
    • Marchew

  `. Nie umieszczaj drugiego `

  ` obok elementu nadrzędnego, bo struktura stanie się nieczytelna. Warto również zachować kolejność elementów w kodzie zgodną z kolejnością ich wyświetlania. Poprawny HTML pomaga użytkownikom, ułatwia późniejsze zmiany i ogranicza problemy z dostępnością. Gdy lista ma określoną kolejność kroków, użyj `
  ` zamiast `
  `.