เอกสาร W3 มีตัวอย่างรายการซ้อนอยู่นำหน้าด้วย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>

ตัวเลือก 2ถูกต้อง

รายการที่ซ้อนกันควรอยู่ใน<li>องค์ประกอบของรายการที่ซ้อนอยู่

เชื่อมโยงไปยัง W3C วิกิพีเดียในรายการ (เอามาจากความคิดเห็นด้านล่าง): HTML Lists วิกิพีเดีย

เชื่อมโยงไปยัง W3C HTML5 ulข้อมูลจำเพาะ: HTML5 ulโปรดทราบว่าulองค์ประกอบอาจมีองค์ประกอบที่เป็นศูนย์หรือมากกว่าliนั้น เช่นเดียวกับHTML5 olรายการคำอธิบาย ( HTML5dl ) คล้ายกัน แต่อนุญาตทั้งสองอย่างdtและddองค์ประกอบ

หมายเหตุเพิ่มเติม:

• dl = รายการความหมาย
• ol = รายการที่สั่งซื้อ (ตัวเลข)
• ul = รายการที่ไม่เรียงลำดับ (สัญลักษณ์แสดงหัวข้อย่อย)

ตัวเลือก 2

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

รายการการทำรัง - UL

ตัวเลือก 2 ถูกต้อง: ซ้อนกัน<ul>เป็นลูกของ<li>มันอยู่ใน

หากคุณตรวจสอบตัวเลือก 1 จะเกิดข้อผิดพลาดใน html 5 - เครดิต: user3272456

ถูกต้อง: <ul>เป็นลูกของ<li>

วิธีที่เหมาะสมในการสร้างรายการ HTML แบบซ้อนคือแบบซ้อน<ul>เป็นลูกของรายการ<li>นั้น รายการซ้อนควรอยู่ใน<li>องค์ประกอบของรายการที่ซ้อนอยู่

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

W3C มาตรฐานสำหรับรายการการซ้อน

ไอเท็มรายการสามารถมีได้ทั้งรายการ - ซึ่งรู้จักกันในชื่อ "ซ้อน" รายการ มันจะมีประโยชน์สำหรับสิ่งต่าง ๆ เช่นสารบัญเช่นที่จุดเริ่มต้นของบทความนี้:

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>รายการที่มีรายการ รายการที่ซ้อนกันมักจะเป็นพื้นฐานสำหรับเมนูการนำทางเว็บไซต์เนื่องจากเป็นวิธีที่ดีในการกำหนดโครงสร้างแบบลำดับชั้นของเว็บไซต์

ตามหลักวิชาคุณสามารถสร้างรายชื่อได้มากเท่าที่คุณต้องการแม้ว่าในทางปฏิบัติมันอาจสร้างความสับสนในการสร้างรายชื่อที่ลึกเกินไป สำหรับรายการที่มีขนาดใหญ่มากคุณอาจแยกเนื้อหาออกเป็นหลาย ๆ รายการด้วยหัวเรื่องแทนหรือดีกว่าแยกเป็นหน้าอื่น ๆ

หากคุณตรวจสอบตัวเลือก 1 จะเกิดข้อผิดพลาดใน html 5 ดังนั้นตัวเลือกที่ 2 นั้นถูกต้อง

ฉันชอบตัวเลือกที่สองเพราะมันแสดงรายการอย่างชัดเจนว่าเป็นผู้ครอบครองรายการซ้อน ฉันมักจะเอนตัวไปทาง HTML เสียงที่มีความหมาย

คุณคิดจะใช้ TAG "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>

สิ่งที่ไม่ได้กล่าวถึงในที่นี้คือตัวเลือกที่ 1 ช่วยให้คุณสามารถสร้างรายการแบบลึกโดยพลการ

สิ่งนี้ไม่สำคัญว่าคุณจะควบคุมเนื้อหา / css หรือไม่ แต่ถ้าคุณทำโปรแกรมแก้ไขข้อความที่มีรูปแบบมันมีประโยชน์

ตัวอย่างเช่น gmail, inbox และ evernote ทั้งหมดอนุญาตให้สร้างรายการแบบนี้:

ด้วยตัวเลือก 2 คุณไม่สามารถครบกำหนดได้ (คุณจะมีรายการพิเศษ) ด้วยตัวเลือกที่ 1 คุณสามารถทำได้