Właściwy sposób na utworzenie listy zagnieżdżonej HTML?

500

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>
Ricket
źródło

Odpowiedzi:

509

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).
DwB
źródło
41
Oto oficjalne informacje W3C, w3.org/wiki/HTML_lists#Nesting_lists , opcja 2 jest poprawna
Jose Elera
Zetknąłem się z przypadkiem, który wydaje się niemożliwy do utworzenia przy użyciu prawidłowego HTML5: zagnieżdżony element listy bez nadrzędnego elementu listy (wyobraź sobie naciśnięcie klawisza TAB, aby wprowadzić wcięcie na początku elementu listy w edytorze tekstu). Zobacz moje pytanie tutaj: stackoverflow.com/questions/61094384/…
Mark
63

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

csi
źródło
33

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.

Geoffrey Hale
źródło
7

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

użytkownik3272456
źródło
6

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.

Ken Gregory
źródło
2

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>
CSSMAN
źródło
2
Twoje przykłady nie są takie same. Drugi przykład z „Choice A”, „Choice B”, „Sub 1”, „Sub 2” nie działa dla sparowanych tagów 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, dldobrym wyborem może być.
Ricket
Czy możesz edytować swój komentarz, aby podać równoważne przykłady - np. Oba zawierające wybór A i wybór B z dwoma podtytułami Sub 1 i Sub 2 dla Choice B?
Zlatin Zlatev
-5

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:

dowolnie zagnieżdżona lista

Z opcją 2 nie możesz tego zrobić (będziesz mieć dodatkową pozycję na liście), z opcją 1 możesz.

ibash
źródło
2
Opcja 1 produkuje nieprawidłowy kod HTML. Pięć lat temu, kiedy zadano to pytanie, mogło tak nie być, ale jest teraz.
j08691
Tak, to zdecydowanie niepoprawny HTML. Jednak nadal jest używany i nadal jest przydatny dla kompatybilności. Alternatywą jest majstrowanie przy marginesach i stylach wypunktowania, które mogą nie być tym, czego potrzebujesz podczas pisania wiadomości e-mail.
ibash
1
Nie jestem pewien, czy rozumiem, dlaczego chciałbym mieć coś źle wyregulowanego w ten sposób. Czy możesz edytować swój komentarz, aby bardziej sensownie go wykorzystać?
Zlatin Zlatev
Co ważne, umożliwia to dowolną edycję formularzy dla grupy pocisków, zapewniając bardziej intuicyjny wygląd. Jako użytkownik, jeśli mam listę pocisków, chciałbym je wciąć i zagnieździć pod nową kulą. Bez możliwości arbitralnego wcięcia użytkownik musiałby najpierw wstawić punktor nagłówka, a następnie wciąć każdy punkt później. Dzięki możliwości dowolnego wcięcia użytkownik może wciąć grupę punktorów, a następnie wstawić nowy punktor nagłówka.
ibash