製作HTML嵌套列表的正確方法？

Question

W3文檔有一個nested list example前綴DEPRECATED EXAMPLE:，但他們從來沒有用一個不推薦的例子來糾正它，也沒有解釋這個例子到底出了什麼問題。

那麼，哪種方法是編寫HTML列表的正確方法？

選項1：嵌套<ul>是父的子<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> 

選項2：嵌套<ul>是它所屬的<li>在

<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> 

Answer 1

子選項2是正確的。

嵌套列表應該在其嵌套列表的<li>元素內的。

鏈接到W3C Wiki關於列表（摘自下面的評論）：HTML Lists Wiki。

鏈接到HTML5 W3C ul規格：HTML5 ul。請注意，ul元素可能包含精確爲零或更多的li元素。這同樣適用於HTML5 ol。 說明列表（HTML5 dl）與此類似，但允許使用dt和dd元素。

更多注：

• dl =定義列表。
• ol =有序列表（數字）。
• ul =無序列表（項目符號）。

Answer 2

選項2

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

Nesting Lists - UL

Answer 3

我喜歡備選方案二，因爲它清楚地顯示列表項作爲嵌套列表的擁有者。我總是傾向於語義上合理的HTML。

Answer 4

如果驗證，選項1在html 5中出現錯誤，所以選項2是正確的。

Answer 5

你有沒有想過使用標籤「dt」而不是「ul」來嵌套列表？它的繼承風格和結構允許您爲每個部分設置一個標題，並自動列表內部的內容。

<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> 

Answer 6

選擇2是正確的：嵌套<ul>是它屬於中<li>的孩子

如果validate，選項1出來作爲。 html 5中的錯誤 - 信用度：user3272456

---

正確：<ul>爲<li>

的正確方法的孩子，使HTML嵌套列表是嵌套<ul>作爲其所屬的<li>的孩子。嵌套列表應位於嵌套列表的<li>元素內。

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

---

W3C標準Nesting Lists

列表項目可以包含另一個整個列表 - 這被稱爲 「嵌套」 的列表。這是對於像表的內容，比如一個在本文開始有用：

1. 章
   1. 第一節
   2. 第二節
   3. 第三節
2. 第二章
3. 第三章

嵌套列表的關鍵是記住嵌套列表應該與一個特定的列表項關聯。爲了在代碼中反映出來，嵌套列表包含在該列表項中。上面的列表中的代碼看起來是這樣的：

<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> 

注意嵌套列表中<li>和包含列表項（「第一章」）的文本後，怎麼開始的;然後在包含列表項的</li>之前結束。嵌套列表通常構成網站導航菜單的基礎，因爲它們是定義網站層次結構的好方法。

從理論上講，您可以根據需要嵌套儘可能多的列表，儘管在實踐中可能會讓列表嵌套過深。對於非常大的列表，您最好將內容分成多個帶有標題的列表，或者甚至將其分成單獨的頁面。

Answer 7

這裏沒有提到的是，選項1允許您任意深度的列表嵌套。

如果你控制內容/ css，這應該不重要，但如果你正在製作一個富文本編輯器，它就派上用場了。

如Gmail，收件箱，Evernote的都允許創建列表如下：

對於選項2，你不能因爲說（你有一個額外的列表項），與選項1 ， 您可以。