Listy nienumerowane (<ul>)

Lekcja 4.2: Listy nienumerowane (<ul>)

Strona główna > Rozdział 4: Listy > Listy nienumerowane (<ul>)

Czym jest lista nienumerowana?

Lista nienumerowana (lub nieuporządkowana) w HTML służy do prezentowania zbioru elementów, których kolejność nie ma szczególnego znaczenia. Elementy takiej listy są zazwyczaj wyświetlane z punktorem (np. kropką, okręgiem lub kwadratem) przed każdym z nich.

Listy nienumerowane tworzy się za pomocą znacznika <ul> (unordered list), a każdy element listy umieszcza się wewnątrz znacznika <li> (list item).

Podstawowa struktura listy <ul>

Oto podstawowa struktura listy nienumerowanej:

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

Pierwszy element listy
Drugi element listy
Trzeci element listy

Jak widać, przeglądarka domyślnie dodaje punktory (zazwyczaj kropki) przed każdym elementem <li>.

Zastosowania list nienumerowanych

Listy nienumerowane są niezwykle wszechstronne i znajdują zastosowanie w wielu sytuacjach, na przykład:

Listy cech produktu
Listy składników (gdy kolejność nie jest kluczowa)
Menu nawigacyjne na stronie (bardzo częste zastosowanie!)
Listy linków
Wypunktowania w tekście

Stylizacja punktorów za pomocą CSS

Domyślny wygląd punktorów (zazwyczaj kropki) można łatwo zmienić za pomocą CSS i właściwości list-style-type. Możliwe wartości to m.in.:

disc (domyślna kropka)
circle (okrąg)
square (kwadrat)
none (brak punktora)

<ul style="list-style-type: square;">
    <li>Element z kwadratem</li>
    <li>Kolejny element</li>
</ul>

<ul style="list-style-type: none;">
    <li>Element bez punktora</li>
    <li>Kolejny element</li>
</ul>

Element z kwadratem
Kolejny element

Element bez punktora
Kolejny element

Można również użyć własnych obrazków jako punktorów za pomocą właściwości list-style-image.

Zagnieżdżanie list nienumerowanych

Listy nienumerowane można zagnieżdżać, umieszczając jedną listę <ul> wewnątrz elementu <li> innej listy. Przeglądarki zazwyczaj automatycznie zmieniają styl punktorów dla zagnieżdżonych list.

<ul>
    <li>Element poziomu 1</li>
    <li>Kolejny element poziomu 1
        <ul>
            <li>Element poziomu 2</li>
            <li>Inny element poziomu 2</li>
        </ul>
    </li>
    <li>Ostatni element poziomu 1</li>
</ul>

Element poziomu 1
Kolejny element poziomu 1
- Element poziomu 2
- Inny element poziomu 2
Ostatni element poziomu 1

Listy nienumerowane w nawigacji

Jednym z najczęstszych zastosowań list <ul> jest tworzenie menu nawigacyjnych. Dzięki CSS można całkowicie zmienić wygląd listy, usuwając punktory i układając elementy poziomo.

<nav>
    <ul style="list-style-type: none; padding: 0; margin: 0;">
        <li style="display: inline-block; margin-right: 10px;"><a href="#">Strona główna</a></li>
        <li style="display: inline-block; margin-right: 10px;"><a href="#">O nas</a></li>
        <li style="display: inline-block;"><a href="#">Kontakt</a></li>
    </ul>
</nav>

Użycie <ul> do nawigacji jest semantycznie poprawne, ponieważ menu to zbiór linków, których kolejność zazwyczaj nie jest kluczowa.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz listę nienumerowaną zawierającą Twoje ulubione owoce. Zmień styl punktorów na kwadraty za pomocą CSS.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Ulubione Owoce</title>
    <style>
        .ulubione-owoce {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <h1>Moje Ulubione Owoce</h1>
    
    <ul class="ulubione-owoce">
        <li>Truskawki</li>
        <li>Banany</li>
        <li>Jabłka</li>
        <li>Winogrona</li>
        <li>Mango</li>
    </ul>
</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Stwórz listę nienumerowaną z cechami Twojego ulubionego zwierzęcia.
Zagnieźdź listę nienumerowaną w innej liście nienumerowanej, np. tworząc listę kontynentów, a w niej listę krajów.
Usuń punktory z listy za pomocą CSS (list-style-type: none;).
Stwórz prostą nawigację poziomą (menu) używając listy <ul> i stylów CSS (display: inline-block;).

Najczęściej zadawane pytania

Do czego służy lista nienumerowana (<ul>)?

Lista nienumerowana (<ul>) służy do prezentowania zbioru elementów, których kolejność nie ma znaczenia. Elementy są zazwyczaj oznaczane punktorami. Jest często używana do list cech, menu nawigacyjnych czy wypunktowań.

Jak zmienić wygląd punktorów w liście <ul>?

Wygląd punktorów można zmienić za pomocą właściwości CSS list-style-type. Można ustawić wartości takie jak disc (kropka), circle (okrąg), square (kwadrat) lub none (brak punktora).

Czy można zagnieżdżać listy <ul>?

Tak, listy nienumerowane można zagnieżdżać, umieszczając jedną listę <ul> wewnątrz elementu <li> innej listy. Przeglądarki zazwyczaj automatycznie stosują różne style punktorów dla kolejnych poziomów zagnieżdżenia.

Jak usunąć punktory z listy?

Aby usunąć punktory z listy nienumerowanej, należy użyć CSS i ustawić właściwość list-style-type na none dla znacznika <ul> lub konkretnej klasy listy: ul { list-style-type: none; }.

Czy lista <ul> jest dobra do tworzenia menu?

Tak, użycie listy <ul> do tworzenia menu nawigacyjnego jest bardzo popularną i semantycznie poprawną praktyką. Za pomocą CSS można łatwo usunąć punktory i ułożyć elementy listy poziomo.