Dokumenty W3 mają poprzedzony przykład zagnieżdżonej listyDEPRECATED EXAMPLE:
, ale nigdy go nie poprawili nieaktualnym przykładem, ani nie wyjaśnili dokładnie, co jest nie tak z tym przykładem.
Który z tych sposobów jest prawidłowym sposobem na napisanie listy HTML?
Opcja 1 : zagnieżdżony <ul>
jest dzieckiem rodzica<ul>
<ul>
<li>List item one</li>
<li>List item two with subitems:</li>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
<li>Final list item</li>
</ul>
Opcja 2 : zagnieżdżone <ul>
to dziecko, do <li>
którego należy
<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
źródło
Opcja 2
Listy zagnieżdżone - UL
źródło
Opcja 2 jest poprawna: Zagnieżdżone
<ul>
jest dzieckiem tego, do<li>
którego należy.Prawidłowo:
<ul>
jako dziecko<li>
Właściwym sposobem na utworzenie listy zagnieżdżonej HTML jest zagnieżdżenie
<ul>
jako element potomny należącej<li>
do niej listy. Lista zagnieżdżona powinna znajdować się w<li>
elemencie listy, w której jest zagnieżdżona.Standard W3C dla list zagnieżdżonych
Element listy może zawierać kolejną całą listę - nazywa się to „zagnieżdżaniem” listy. Jest przydatny w przypadku spisów treści, takich jak ten na początku tego artykułu:
Kluczem do zagnieżdżania list jest pamiętanie, że zagnieżdżona lista powinna odnosić się do jednego konkretnego elementu listy. Aby odzwierciedlić to w kodzie, zagnieżdżona lista znajduje się wewnątrz tego elementu listy. Kod powyższej listy wygląda mniej więcej tak:
Zwróć uwagę na to, jak lista zagnieżdżona zaczyna się za
<li>
i tekstem zawierającego element listy („Rozdział pierwszy”); następnie kończy się przed</li>
zawierającym element listy. Listy zagnieżdżone często stanowią podstawę menu nawigacji w witrynie, ponieważ są dobrym sposobem na zdefiniowanie hierarchicznej struktury witryny.Teoretycznie możesz zagnieździć tyle list, ile chcesz, chociaż w praktyce może być mylące zbyt głębokie zagnieżdżanie list. W przypadku bardzo dużych list lepiej jest podzielić treść na kilka list z nagłówkami, a nawet podzielić ją na osobne strony.
źródło
Jeśli zatwierdzisz, opcja 1 pojawia się jako błąd w html 5, więc opcja 2 jest poprawna.
źródło
Wolę opcję drugą, ponieważ wyraźnie pokazuje element listy jako posiadacza tej zagnieżdżonej listy. Zawsze skłaniałem się ku semantycznie dźwiękowemu HTML.
źródło
Czy zastanawiałeś się nad użyciem TAG „dt” zamiast „ul” do list zagnieżdżania? Jego odziedziczony styl i struktura pozwala mieć tytuł na sekcję i automatycznie tabuluje zawartość, która wchodzi do środka.
VS
źródło
dt
/dd
. Podejrzewam, że również nieodłączny styl (i tabulacja) pochodzi tylko z domyślnego arkusza stylów przeglądarki, więc to niewiele mówi. Traktowałbym to jak element semantyczny; jeśli masz listę definicji, a może po prostu masz pary danych tytuł / opis,dl
dobrym wyborem może być.Nie wspomniano tutaj, że opcja 1 umożliwia dowolne głębokie zagnieżdżanie list.
Nie powinno to mieć znaczenia, jeśli kontrolujesz zawartość / css, ale jeśli tworzysz edytor tekstu sformatowanego, jest to przydatne.
Na przykład Gmail, Skrzynka odbiorcza i Evernote zezwalają na tworzenie takich list:
Z opcją 2 nie możesz tego zrobić (będziesz mieć dodatkową pozycję na liście), z opcją 1 możesz.
źródło