Cara yang tepat untuk membuat daftar bersarang HTML?

500

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

Jawaban:

509

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).
DwB
sumber
41
Berikut adalah informasi W3C resmi, w3.org/wiki/HTML_lists#Nesting_lists , Opsi 2 adalah cara yang benar
Jose Elera
Saya mengalami kasus yang sepertinya tidak mungkin dibuat dengan HTML5 yang valid: item daftar bersarang tanpa item daftar orang tua (bayangkan menekan TAB untuk membuat indentasi pada awal item daftar dalam pengolah kata). Lihat pertanyaan saya di sini: stackoverflow.com/questions/61094384/…
Tandai
63

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

csi
sumber
33

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.

Geoffrey Hale
sumber
7

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

pengguna3272456
sumber
6

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

Ken Gregory
sumber
2

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>
CSSMAN
sumber
2
Contoh Anda tidak sama. Contoh kedua dengan "Pilihan A", "Pilihan B", "Sub 1", "Sub 2" tidak berfungsi untuk dt/ ddtag 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, a dlbisa menjadi pilihan yang baik.
Ricket
Bisakah Anda mengedit komentar Anda untuk memberikan contoh yang setara - misalnya keduanya mengandung pilihan A dan pilihan B dengan dua sub-entri Sub 1 dan Sub 2 untuk Pilihan B?
Zlatin Zlatev
-5

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:

daftar bersarang sewenang-wenang

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

ibash
sumber
2
Opsi 1 menghasilkan HTML yang tidak valid. Lima tahun yang lalu ketika pertanyaan ini diajukan, itu mungkin bukan masalahnya tetapi sekarang.
j08691
Ya, itu jelas HTML tidak valid. Namun itu masih digunakan dan masih berguna untuk kompatibilitas. Alternatifnya adalah mengutak-atik margin dan gaya peluru yang mungkin bukan yang Anda inginkan ketika menulis email.
ibash
1
Saya tidak yakin saya mengerti mengapa saya ingin sesuatu yang tidak selaras seperti ini. Bisakah Anda mengedit komentar Anda untuk memberikan penggunaan yang lebih bermakna untuk ini?
Zlatin Zlatev
Yang penting ini memungkinkan pengeditan formulir gratis untuk sekelompok peluru, memberikannya perasaan yang lebih intuitif. Sebagai pengguna, jika saya memiliki daftar peluru, saya mungkin ingin membuat mereka masuk dan menyimpannya di bawah peluru baru. Tanpa kemampuan untuk indent ke sewenang-wenang pengguna pertama-tama harus memasukkan peluru header dan kemudian indentasi setiap peluru setelahnya. Dengan kemampuan untuk indentasi sewenang-wenang, pengguna dapat membuat indentasi kelompok peluru dan kemudian memasukkan peluru header baru.
ibash