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>
sumber
pilihan 2
Daftar Nesting - UL
sumber
Opsi 2 sudah benar: Sarang
<ul>
adalah<li>
miliknya.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.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:
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:
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.
sumber
Jika Anda memvalidasi, opsi 1 muncul sebagai kesalahan dalam html 5, jadi opsi 2 sudah benar.
sumber
Saya lebih suka opsi dua karena jelas menunjukkan item daftar sebagai pemilik daftar bersarang itu. Saya akan selalu condong ke HTML semantik suara.
sumber
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.
VS
sumber
dt
/dd
tag yang dipasangkan. Juga gaya bawaan (dan tabulasi, saya kira) hanya berasal dari stylesheet browser default, jadi itu tidak banyak bicara. Saya akan memperlakukannya seperti elemen semantik; jika Anda memiliki daftar definisi, atau mungkin jika Anda hanya memiliki pasangan data judul / deskripsi, adl
bisa menjadi pilihan yang baik.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.
sumber