Các tài liệu W3 có một ví dụ danh sách lồng nhau có tiền tố DEPRECATED EXAMPLE:, nhưng họ không bao giờ sửa nó với một ví dụ không được phản đối, cũng không giải thích chính xác những gì sai với ví dụ.

Vậy cách nào trong những cách này là cách chính xác để viết danh sách HTML?

Cách 1 : lồng nhau <ul>là con của bố mẹ<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>

Tùy chọn 2 : lồng nhau <ul>là con của <li>nó

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

Lựa chọn 2 là chính xác.

Danh sách lồng nhau phải nằm trong một thành <li>phần của danh sách mà nó được lồng.

Liên kết đến W3C Wiki trên Danh sách (lấy từ nhận xét bên dưới): Wiki Danh sách HTML .

Liên kết đến thông số HTML5 W3C ul: HTML5ul . Lưu ý rằng một ulphần tử có thể chứa chính xác bằng 0 hoặc nhiều liphần tử. Điều tương tự cũng áp dụng cho HTML5ol . Danh sách mô tả ( HTML5dl ) tương tự nhau, nhưng cho phép cả hai dtvà ddcác yếu tố.

Ghi chú thêm:

• dl = danh sách định nghĩa.
• ol = danh sách đặt hàng (số).
• ul = danh sách không có thứ tự (đạn).

Lựa chọn 2

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

Danh sách làm tổ - UL

Tùy chọn 2 là chính xác: Lồng nhau <ul>là con của <li>nó.

Nếu bạn xác thực , tùy chọn 1 xuất hiện dưới dạng lỗi trong html 5 - credit: user3272456

Đúng: <ul>là con của<li>

Cách thích hợp để tạo danh sách lồng nhau HTML là với lồng nhau <ul>như là một phần tử con của <li>nó. Danh sách lồng nhau phải nằm trong <li>phần tử của danh sách mà nó được lồng.

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

Tiêu chuẩn W3C cho danh sách làm tổ

Một mục danh sách có thể chứa toàn bộ danh sách khác - đây được gọi là "lồng" một danh sách. Nó rất hữu ích cho những thứ như mục lục, chẳng hạn như mục ở đầu bài viết này:

1. Chương một
   1. Mục một
   2. Mục hai
   3. Mục ba
2. Chương hai
3. Chương ba

Chìa khóa cho danh sách lồng nhau là hãy nhớ rằng danh sách lồng nhau phải liên quan đến một mục danh sách cụ thể. Để phản ánh rằng trong mã, danh sách lồng nhau được chứa trong mục danh sách đó. Mã cho danh sách trên trông giống như thế này:

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

Lưu ý cách danh sách lồng nhau bắt đầu sau <li>và văn bản của mục danh sách chứa (Chương Chương Một); sau đó kết thúc trước </li>mục danh sách chứa. Danh sách lồng nhau thường tạo cơ sở cho các menu điều hướng trang web, vì chúng là một cách tốt để xác định cấu trúc phân cấp của trang web.

Về mặt lý thuyết bạn có thể lồng bao nhiêu danh sách tùy thích, mặc dù trong thực tế, nó có thể trở nên khó hiểu với các danh sách lồng quá sâu. Đối với các danh sách rất lớn, bạn có thể tốt hơn hết là chia nội dung thành nhiều danh sách với các tiêu đề thay vào đó, hoặc thậm chí chia nó thành các trang riêng biệt.

Nếu bạn xác thực, tùy chọn 1 xuất hiện dưới dạng lỗi trong html 5, vì vậy tùy chọn 2 là chính xác.

Tôi thích tùy chọn hai vì nó hiển thị rõ ràng mục danh sách là người sở hữu danh sách lồng nhau đó. Tôi sẽ luôn luôn nghiêng về HTML về mặt ngữ nghĩa.

Bạn đã nghĩ đến việc sử dụng TAG "dt" thay vì "ul" cho danh sách lồng nhau chưa? Kiểu kế thừa và cấu trúc cho phép bạn có một tiêu đề cho mỗi phần và nó tự động lập bảng nội dung đi vào bên trong.

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

Điều không được đề cập ở đây là tùy chọn 1 cho phép bạn tùy ý lồng sâu các danh sách.

Điều này không quan trọng nếu bạn kiểm soát nội dung / css, nhưng nếu bạn đang tạo một trình soạn thảo văn bản phong phú thì nó sẽ có ích.

Ví dụ: gmail, hộp thư đến và evernote đều cho phép tạo danh sách như thế này:

Với tùy chọn 2, bạn không thể vì điều đó (bạn sẽ có thêm một mục danh sách), với tùy chọn 1, bạn có thể.