Aby poprawnie zagnieżdżać listy HTML, umieść każdą podlistę wewnątrz elementu listy, do którego należy, przed jego znacznikiem zamykającym. Ten poradnik pokazuje, jak utworzyć, zapisać i wyświetlić podgląd przykładu z trzema poziomami, korzystając na Macu z aplikacji TextEdit i Safari.

Gdzie powinna znajdować się zagnieżdżona lista HTML?

Lista HTML ma dwie części strukturalne: kontener listy i jej elementy. Użyj <ul> w przypadku listy nieuporządkowanej, a <ol> w przypadku listy uporządkowanej. Każdy zwykły element jest ujęty w znaczniki <li> i </li>. Zagnieżdżona lista powinna znajdować się wewnątrz jednego z tych elementów. Przewodnik Google Listy pokazuje dokładnie ten sposób zagnieżdżania.

Podstawowa kolejność jest następująca: otwórz element nadrzędny, wpisz jego etykietę, wstaw całą podlistę, a następnie zamknij element nadrzędny. Widoczny znacznik zamykający ułatwia sprawdzenie tej relacji.

Ten poprawny fragment HTML przypisuje Grupie A dwa elementy podrzędne, pozostawiając Grupę B na poziomie nadrzędnym:

<ul>
  <li>Group A
    <ul>
      <li>Item A1</li>
      <li>Item A2</li>
    </ul>
  </li>
  <li>Group B</li>
</ul>

Czytaj znaczniki zamykające od wewnątrz na zewnątrz. Najpierw zamykany jest każdy element podrzędny. Następnie lista wewnętrzna jest zamykana znacznikiem </ul>. Potem zamykana jest Grupa A znacznikiem </li>. Dopiero wtedy zaczyna się Grupa B. Dzięki temu możesz praktycznie sprawdzić strukturę: znajdź znaczniki otwierający i zamykający elementu nadrzędnego i upewnij się, że cała podlista znajduje się między nimi.

Standard HTML dopuszcza zawartość przepływową wewnątrz elementów <li>, a należą do niej także listy. Model zawartości elementów <ul> i <ol> dopuszcza elementy listy oraz elementy obsługujące skrypty; nie zezwala natomiast na umieszczenie kolejnego kontenera listy bezpośrednio wewnątrz kontenera zewnętrznego. Zobacz definicje zawartości grupującej w standardzie HTML.

Wybieraj typ listy niezależnie na każdym poziomie

Zastanów się, czy zmiana kolejności elementów zmieniłaby ich znaczenie. Jeśli tak, wybierz <ol>. Jeśli elementy tworzą zbiór, którego znaczenie nie zależy od kolejności, wybierz <ul>. Zadawaj to pytanie osobno dla każdej podlisty. Dokumentacja Mozilli dotycząca list uporządkowanych wyjaśnia zarówno ten test kolejności, jak i łączenie typów list.

W poniższym przykładzie Grupy A i B są neutralnymi kategoriami, więc lista zewnętrzna jest nieuporządkowana. Elementy A1 i A2 również tworzą nieuporządkowany zbiór. W przypadku elementu A2 otwarcie przykładowego dokumentu poprzedza zmianę jego nazwy, dlatego te dwie instrukcje tworzą listę uporządkowaną.

Relacja między treścią Wybór listy Umiejscowienie
Zbiór grup <ul> Wokół elementów grupy
Elementy należące do Grupy A <ul> Wewnątrz <li> Grupy A
Sekwencja należąca do elementu A2 <ol> Wewnątrz <li> elementu A2
Elementy należące do Grupy B <ul> Wewnątrz osobnego <li> Grupy B

Zmiana punktorów na numerację nie wymaga innego sposobu zagnieżdżania. Element nadrzędny nadal obejmuje całą listę podrzędną. Dokumentacja Mozilli wyraźnie dopuszcza zagnieżdżanie list uporządkowanych i nieuporządkowanych na wielu poziomach. Uwagi o używaniu list uporządkowanych

Utwórz kompletny dokument z zagnieżdżoną listą w TextEdit

Poniższy przykład to kompletny dokument HTML. Zawiera przykładowe etykiety i nie wymaga pobierania zasobów ani dodawania kodu. Jego struktura obejmuje cztery listy i osiem elementów listy: dwie grupy zewnętrzne, cztery elementy rozłożone między te grupy oraz dwie instrukcje pod elementem A2.

W TextEdit wybierz File > New, a następnie Format > Make Plain Text. Wklej cały poniższy przykład. Apple opisuje ten przepływ pracy z tekstem zwykłym przy tworzeniu plików HTML w przewodniku TextEdit dotyczącym HTML.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample workspace outline</title>
</head>
<body>
  <h1>Sample workspace outline</h1>
  <ul>
    <li>Group A
      <ul>
        <li>Item A1</li>
        <li>Item A2
          <ol>
            <li>Open the sample document.</li>
            <li>Rename the sample document.</li>
          </ol>
        </li>
      </ul>
    </li>
    <li>Group B
      <ul>
        <li>Item B1</li>
        <li>Item B2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Wybierz File > Save, nazwij plik nested-lists.html i zapisz go w łatwo dostępnym miejscu. Jeśli TextEdit zapyta, którego rozszerzenia użyć, wybierz Use .html. Są to opisane przez Apple kroki zapisywania pliku HTML. Skopiuj tylko kod z bloku, pomijając linie z ogrodzeniem Markdown.

W Finderze zaznacz zapisany plik i wybierz File > Open With > Safari. Apple opisuje wybór aplikacji przez File > Open With w artykule Wybieranie aplikacji do otwierania pliku na Macu.

Porównaj podgląd z poniższymi oczekiwanymi relacjami:

  • Grupy A i B są elementami równorzędnymi na poziomie zewnętrznym.
  • Elementy A1 i A2 należą do Grupy A.
  • Dwie ponumerowane instrukcje należą wyłącznie do elementu A2.
  • Elementy B1 i B2 należą do Grupy B.

Sprawdź te relacje zarówno w kodzie źródłowym, jak i w widoku. Jawne znaczniki i relacje między listami a ich elementami nadrzędnymi w przykładzie zostały sprawdzone programowo; wyglądu w Safari tutaj nie sprawdzono.

Zdiagnozuj podlistę przypisaną do niewłaściwego elementu

Gdy istniejący dokument zawiera właściwe słowa, ale ma nieprawidłową hierarchię, zastosuj poniższą sekwencję. Pracuj kolejno nad jednym elementem nadrzędnym i jego bezpośrednimi elementami podrzędnymi, zaczynając od listy zewnętrznej.

1. Znajdź element nadrzędny zamykany zbyt wcześnie

Ten niepoprawny fragment zamyka Grupę A, zanim zacznie się jej podlista:

<ul>
  <li>Group A</li>
  <ul>
    <li>Item A1</li>
  </ul>
</ul>

W tym miejscu wewnętrzne <ul> jest bezpośrednim elementem podrzędnym zewnętrznego <ul>. Przenieś </li> Grupy A poniżej wewnętrznego </ul>, aby element nadrzędny obejmował podlistę. Ta poprawka realizuje zasadę umieszczania pokazaną w przykładzie zagnieżdżonej listy Google.

2. Sprawdź, czy poprawna struktura nie ma niewłaściwego elementu nadrzędnego

Lista może być zagnieżdżona zgodnie z zasadami, a mimo to opisywać niewłaściwą relację. Na przykład umieszczenie ponumerowanych instrukcji wewnątrz elementu A1 przypisałoby je do A1, nawet jeśli zamierzoną etykietą był element A2. Sama poprawna składnia nie określa zamierzonego grupowania.

Dla każdej podlisty zadaj sobie pytanie: „Znaczniki otwierające który element obejmują całą tę listę?”. Porównaj etykietę tego elementu z zamierzonym elementem nadrzędnym. W kompletnym przykładzie, idąc od ponumerowanych instrukcji na zewnątrz, powinieneś dotrzeć do elementu A2, a następnie do Grupy A. Jeśli docierasz do innej etykiety, przenieś całą podlistę, zanim zmienisz jej wygląd.

3. Zapisuj znaczniki zamykające jawnie podczas edycji

W określonych sytuacjach można pominąć znacznik zamykający elementu </li>, między innymi gdy bezpośrednio po nim następuje kolejny element. Nie musisz polegać na tym skrócie. Podczas nauki lub naprawiania zagnieżdżenia wpisuj każdy znacznik zamykający elementu, aby wyraźnie widzieć każdą granicę. Mozilla podaje dokładne warunki pomijania w technicznym podsumowaniu elementu listy.

Używaj spójnego wcięcia jako pomocy podczas edycji: wcinaj listę podrzędną pod etykietą elementu nadrzędnego i wyrównuj odpowiadające sobie znaczniki otwierające i zamykające listę. Następnie sprawdź rzeczywiste granice znaczników. Wcięcie ułatwia odczytanie zamierzonej relacji; określają ją elementy obejmujące listę.

4. Zachowaj granice akapitów

Jeśli etykieta elementu nadrzędnego wymaga akapitu, zamknij go przed otwarciem podlisty, pozostawiając oba elementy wewnątrz elementu nadrzędnego. Standard HTML określa, że kontenery list nie mogą być elementami podrzędnymi elementów <p>. Zasady dotyczące zawartości akapitów w HTML

Ten poprawny fragment umieszcza akapit z etykietą oraz listę podrzędną razem wewnątrz Grupy A:

<ul>
  <li>
    <p>Group A</p>
    <ul>
      <li>Item A1</li>
    </ul>
  </li>
</ul>

Ponownie otwórz kod źródłowy i zachowaj hierarchię podczas wprowadzania zmian

Jeśli po ponownym otwarciu pliku w TextEdit widzisz sformatowaną treść zamiast znaczników, wybierz File > Open, zaznacz plik, kliknij Show Options, zaznacz Ignore rich text commands, a następnie kliknij Open. W przypadku przyszłych plików Apple udostępnia również opcje TextEdit > Settings > Open and Save i Display HTML files as HTML code instead of formatted text. Wyświetlanie kodu HTML w TextEdit

Przenosząc element, przenieś cały jego blok <li>, łącznie z zawartymi w nim podlistami. Na przykład przeniesienie elementu A2 wymaga zabrania ze sobą obu jego instrukcji. Przeniesienie samej etykiety pozostawiłoby te instrukcje na miejscu i zmieniło zamierzone grupowanie dokumentu.

Przed zapisaniem poprawionej wersji sprawdź trzy rzeczy: każda lista podrzędna jest objęta przez zamierzony element nadrzędny; elementy równorzędne pozostają w wymaganej kolejności; każda lista używa punktorów lub numeracji zależnie od tego, czy jej kolejność ma znaczenie. Zapisz plik, otwórz go ponownie w Safari i porównaj widoczne grupy z zamierzonym konspektem. Zachowanie każdego elementu nadrzędnego wraz z całym jego poddrzewem ułatwia weryfikację przyszłych zmian.

Źródła