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>

Opcja 2 jest poprawna.

Lista zagnieżdżona powinna znajdować się w <li>elemencie listy, w której jest zagnieżdżona.

Link do Wiki W3C na listach (zaczerpnięte z komentarza poniżej): Wiki list HTML .

Link do specyfikacji HTML5 W3C ul: HTML5ul . Zauważ, że ulelement może zawierać dokładnie zero lub więcej lielementów. To samo dotyczy HTML5ol . Lista opisów ( HTML5dl ) jest podobna, ale dopuszcza zarówno elementy, jak dti ddelementy.

Więcej notatek:

• dl = lista definicji.
• ol = lista uporządkowana (liczby).
• ul = lista nieuporządkowana (wypunktowanie).

Opcja 2

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

Listy zagnieżdżone - UL

Opcja 2 jest poprawna: Zagnieżdżone <ul>jest dzieckiem tego, do <li>którego należy.

Jeśli zatwierdzisz , opcja 1 pojawia się jako błąd w html 5 - kredyt: użytkownik3272456

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.

<ul>
    <li>Parent/Item
        <ul>
            <li>Child/Subitem
            </li>
        </ul>
    </li>
</ul>

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:

1. Rozdział pierwszy
   1. Sekcja pierwsza
   2. Sekcja druga
   3. Sekcja trzecia
2. Rozdział drugi
3. Rozdział trzeci

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:

<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

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.

Jeśli zatwierdzisz, opcja 1 pojawia się jako błąd w html 5, więc opcja 2 jest poprawna.

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.

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.

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

VS

<ul>
   <li>Choice A</li>
   <li>Choice B
      <ul>
         <li>Sub 1</li>
         <li>Sub 2</li>
      </ul>
   </li>
</ul>

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.