Kurs HTML

Lekcja 4.5: Zagnieżdżanie list

Strona główna > Rozdział 4: Listy > Zagnieżdżanie list

Czym jest zagnieżdżanie list?

Zagnieżdżanie list w HTML polega na umieszczaniu jednej listy (nienumerowanej <ul>, numerowanej <ol> lub definicyjnej <dl>) wewnątrz elementu innej listy. Najczęściej zagnieżdżoną listę umieszcza się wewnątrz znacznika <li> (dla list <ul> i <ol>) lub <dd> (dla list <dl>).

Zagnieżdżanie pozwala tworzyć bardziej złożone, hierarchiczne struktury informacji, co jest niezwykle przydatne do organizacji treści, tworzenia menu wielopoziomowych czy rozbudowanych spisów treści.

Zagnieżdżanie list tego samego typu

Można łatwo zagnieżdżać listy tego samego typu, np. listę <ul> wewnątrz innej listy <ul> lub <ol> wewnątrz <ol>.

Przykład: Zagnieżdżona lista <ul>

<ul>
    <li>Europa
        <ul>
            <li>Polska</li>
            <li>Niemcy</li>
        </ul>
    </li>
    <li>Azja
        <ul>
            <li>Chiny</li>
            <li>Japonia</li>
        </ul>
    </li>
</ul>
  • Europa
    • Polska
    • Niemcy
  • Azja
    • Chiny
    • Japonia

Przeglądarki zazwyczaj automatycznie zmieniają styl punktorów dla kolejnych poziomów zagnieżdżenia (np. kropka -> okrąg -> kwadrat).

Przykład: Zagnieżdżona lista <ol>

<ol>
    <li>Rozdział 1
        <ol type="a">
            <li>Podrozdział 1.1</li>
            <li>Podrozdział 1.2</li>
        </ol>
    </li>
    <li>Rozdział 2
        <ol type="a">
            <li>Podrozdział 2.1</li>
        </ol>
    </li>
</ol>
  1. Rozdział 1
    1. Podrozdział 1.1
    2. Podrozdział 1.2
  2. Rozdział 2
    1. Podrozdział 2.1

Przeglądarki często stosują różne style numeracji dla zagnieżdżonych list numerowanych (np. 1 -> a -> i), ale można to kontrolować za pomocą atrybutu type lub CSS.

Zagnieżdżanie list różnych typów

Można również mieszać różne typy list, zagnieżdżając je w sobie.

Przykład: Lista <ul> wewnątrz <ol>

Przydatne np. w instrukcjach, gdzie krok główny ma kilka podpunktów, których kolejność nie jest ważna.

<ol>
    <li>Przygotuj składniki:
        <ul>
            <li>Mąka</li>
            <li>Jajka</li>
            <li>Mleko</li>
        </ul>
    </li>
    <li>Wymieszaj składniki.</li>
    <li>Piecz przez 30 minut.</li>
</ol>
  1. Przygotuj składniki:
    • Mąka
    • Jajka
    • Mleko
  2. Wymieszaj składniki.
  3. Piecz przez 30 minut.

Przykład: Lista <ol> wewnątrz <ul>

Przydatne np. w liście cech, gdzie jedna z cech wymaga opisania kroków.

<ul>
    <li>Łatwa instalacja:
        <ol>
            <li>Pobierz plik.</li>
            <li>Uruchom instalator.</li>
            <li>Postępuj zgodnie z instrukcjami.</li>
        </ol>
    </li>
    <li>Wysoka wydajność.</li>
    <li>Intuicyjny interfejs.</li>
</ul>
  • Łatwa instalacja:
    1. Pobierz plik.
    2. Uruchom instalator.
    3. Postępuj zgodnie z instrukcjami.
  • Wysoka wydajność.
  • Intuicyjny interfejs.

Przykład: Lista <dl> wewnątrz <li>

Można użyć listy definicji do opisania szczegółów elementu listy nadrzędnej.

<ul>
    <li>Komputer Stacjonarny
        <dl>
            <dt>Procesor</dt>
            <dd>Intel i7</dd>
            <dt>RAM</dt>
            <dd>16GB</dd>
        </dl>
    </li>
    <li>Laptop
        <dl>
            <dt>Procesor</dt>
            <dd>AMD Ryzen 5</dd>
            <dt>RAM</dt>
            <dd>8GB</dd>
        </dl>
    </li>
</ul>
  • Komputer Stacjonarny
    Procesor
    Intel i7
    RAM
    16GB
  • Laptop
    Procesor
    AMD Ryzen 5
    RAM
    8GB

Poziomy zagnieżdżenia

Teoretycznie można zagnieżdżać listy na wielu poziomach. Należy jednak zachować umiar, ponieważ zbyt głębokie zagnieżdżenie może utrudnić czytelność kodu i treści dla użytkownika. Dobrą praktyką jest ograniczenie się do 2-3 poziomów zagnieżdżenia.

Stylizacja zagnieżdżonych list

Za pomocą CSS można precyzyjnie kontrolować wygląd zagnieżdżonych list, np. zmieniać wcięcia, marginesy, typy punktorów/numeracji dla każdego poziomu.

/* Styl dla pierwszego poziomu ul */
ul {
    list-style-type: disc;
    margin-left: 20px;
}

/* Styl dla drugiego poziomu ul (zagnieżdżonego w li) */
ul li ul {
    list-style-type: circle;
    margin-left: 30px;
}

/* Styl dla trzeciego poziomu ul */
ul li ul li ul {
    list-style-type: square;
    margin-left: 40px;
}

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz zagnieżdżoną listę przedstawiającą strukturę prostego dokumentu HTML (główne sekcje i ich typowe elementy).

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Struktura Dokumentu HTML</title>
</head>
<body>
    <h1>Struktura Dokumentu HTML</h1>
    
    <ul>
        <li><code><!DOCTYPE html></code> (Deklaracja typu dokumentu)</li>
        <li><code><html></code> (Główny element)
            <ul>
                <li><code><head></code> (Sekcja nagłówkowa)
                    <ul>
                        <li><code><meta charset="UTF-8"></code> (Kodowanie znaków)</li>
                        <li><code><title></code> (Tytuł strony)</li>
                        <li><code><link rel="stylesheet" href="..."></code> (Arkusz stylów CSS)</li>
                    </ul>
                </li>
                <li><code><body></code> (Główna treść strony)
                    <ul>
                        <li>Nagłówki (<code><h1></code> - <code><h6></code>)</li>
                        <li>Paragrafy (<code><p></code>)</li>
                        <li>Listy (<code><ul></code>, <code><ol></code>, <code><dl></code>)</li>
                        <li>Linki (<code><a href="..."></code>)</li>
                        <li>Obrazki (<code><img src="..." alt="..."></code>)</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

  1. Stwórz menu nawigacyjne z rozwijanymi podkategoriami, używając zagnieżdżonych list <ul>.
  2. Stwórz spis treści książki z rozdziałami (<ol>) i podrozdziałami (zagnieżdżona <ol> z innym typem numeracji).
  3. Połącz różne typy list, np. stwórz listę kroków (<ol>), gdzie jeden krok zawiera listę opcjonalnych składników (<ul>).
  4. Użyj CSS, aby dostosować wcięcia i style punktorów/numeracji dla różnych poziomów zagnieżdżenia.

Najczęściej zadawane pytania

Jak zagnieździć listę w HTML?

Aby zagnieździć listę, umieść całą nową listę (<ul>, <ol> lub <dl>) wewnątrz znacznika <li> (dla list <ul>/<ol>) lub <dd> (dla list <dl>) listy nadrzędnej. To tworzy hierarchiczną strukturę.

Czy można mieszać typy list podczas zagnieżdżania?

Tak, można swobodnie mieszać typy list. Na przykład, lista nienumerowana (<ul>) może być zagnieżdżona wewnątrz elementu listy numerowanej (<ol>) i odwrotnie, w zależności od potrzeb strukturyzacji danych.

Jak przeglądarki domyślnie formatują zagnieżdżone listy?

Przeglądarki zazwyczaj automatycznie zmieniają styl punktorów (np. kropka -> okrąg -> kwadrat dla <ul>) lub typ numeracji (np. 1 -> a -> i dla <ol>) dla kolejnych poziomów zagnieżdżenia, aby wizualnie oddzielić hierarchię.

Ile poziomów zagnieżdżenia można użyć?

Technicznie nie ma ścisłego limitu poziomów zagnieżdżenia list. Jednak dla zachowania czytelności kodu i przejrzystości treści dla użytkownika, zaleca się ograniczenie głębokości zagnieżdżenia do 2-3 poziomów.

Jak kontrolować wygląd zagnieżdżonych list?

Wygląd zagnieżdżonych list, w tym wcięcia, marginesy, typy punktorów i numeracji, można precyzyjnie kontrolować za pomocą selektorów CSS, które celują w konkretne poziomy zagnieżdżenia (np. ul li ul).

← Poprzednia lekcja: Listy definicji (<dl>)
Następna lekcja: Wprowadzenie do linków →