Dokumen W3 memiliki daftar contoh bersarang diawali oleh DEPRECATED EXAMPLE:, tetapi mereka tidak pernah memperbaikinya dengan contoh yang tidak usang, atau menjelaskan dengan tepat apa yang salah dengan contoh tersebut.

Jadi yang mana dari cara ini adalah cara yang benar untuk menulis daftar HTML?

Opsi 1 : bersarang <ul>adalah anak dari orang tua<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>

Opsi 2 : bersarang <ul>adalah anak dari <li>miliknya

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

Opsi 2 sudah benar.

Daftar bersarang harus di dalam <li>elemen daftar di mana itu bersarang.

Tautan ke W3C Wiki di Daftar (diambil dari komentar di bawah): Daftar HTML Wiki .

Tautan ke ulspesifikasi HTML5 W3C : HTML5ul . Perhatikan bahwa suatu ulelemen mungkin mengandung elemen yang persis nol atau lebih li. Hal yang sama berlaku untuk HTML5ol . Daftar deskripsi ( HTML5dl ) serupa, tetapi memungkinkan keduanya dtdan ddelemen.

Lebih banyak catatan:

• dl = daftar definisi.
• ol = daftar yang diurutkan (angka).
• ul = daftar tidak berurutan (peluru).

pilihan 2

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

Daftar Nesting - UL

Opsi 2 sudah benar: Sarang <ul>adalah <li>miliknya.

Jika Anda memvalidasi , opsi 1 muncul sebagai kesalahan dalam html 5 - kredit: user3272456

Benar: <ul>sebagai anak dari<li>

Cara yang tepat untuk membuat daftar bersarang HTML adalah dengan bersarang <ul>sebagai anak dari <li>mana ia berada. Daftar bersarang harus berada di dalam <li>elemen daftar yang bersarang.

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

Standar W3C untuk Daftar Nesting

Item daftar dapat berisi seluruh daftar lain - ini dikenal sebagai "bersarang" daftar. Ini berguna untuk hal-hal seperti daftar isi, seperti yang ada di awal artikel ini:

1. Bab satu
   1. Bagian Satu
   2. Bagian Dua
   3. Bagian Tiga
2. Bagian dua
3. Bab Tiga

Kunci daftar bersarang adalah untuk mengingat bahwa daftar bersarang harus berhubungan dengan satu item daftar tertentu. Untuk mencerminkan bahwa dalam kode, daftar bersarang terdapat di dalam item daftar itu. Kode untuk daftar di atas terlihat seperti ini:

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

Perhatikan bagaimana daftar bersarang dimulai setelah <li>dan teks dari item daftar yang berisi ("Bab Satu"); kemudian berakhir sebelum </li>item daftar yang berisi. Daftar bersarang sering membentuk dasar untuk menu navigasi situs web, karena mereka adalah cara yang baik untuk menentukan struktur hierarki situs web.

Secara teoritis Anda bisa membuat sarang daftar sebanyak yang Anda suka, meskipun dalam praktiknya bisa menjadi membingungkan untuk daftar sarang terlalu dalam. Untuk daftar yang sangat besar, Anda mungkin lebih baik membagi konten menjadi beberapa daftar dengan judul, atau bahkan membaginya menjadi beberapa halaman terpisah.

Jika Anda memvalidasi, opsi 1 muncul sebagai kesalahan dalam html 5, jadi opsi 2 sudah benar.

Saya lebih suka opsi dua karena jelas menunjukkan item daftar sebagai pemilik daftar bersarang itu. Saya akan selalu condong ke HTML semantik suara.

Pernahkah Anda berpikir tentang menggunakan TAG "dt" daripada "ul" untuk daftar bersarang? Gaya dan struktur bawaannya memungkinkan Anda memiliki judul per bagian dan secara otomatis mentabulasi konten yang masuk ke dalamnya.

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

Apa yang tidak disebutkan di sini adalah bahwa opsi 1 memungkinkan Anda bersarang dalam daftar secara sewenang-wenang.

Ini seharusnya tidak masalah jika Anda mengontrol konten / css, tetapi jika Anda membuat editor teks kaya itu berguna.

Misalnya, gmail, inbox, dan evernote semua memungkinkan membuat daftar seperti ini:

Dengan opsi 2 Anda tidak bisa karena itu (Anda akan memiliki item daftar tambahan), dengan opsi 1, Anda bisa.