Daftar isi kursus HTML pada halaman web Budi menyusun bab, setiap bab memuat beberapa topik, dan sebagian topik memiliki subtopik sendiri. Struktur bertingkat semacam ini tidak dapat ditampung oleh satu ul atau satu ol tunggal: kita membutuhkan list di dalam list, yang dikenal sebagai nested list. Kabar baiknya, HTML tidak menambahkan elemen baru untuk keperluan ini; kombinasi ul dan ol yang telah kita kuasai memadai, asalkan penempatannya benar. Pada Chapter ini kita menetapkan posisi yang sah bagi list bersarang, kesalahan penempatan yang ditolak validator, serta konvensi indentasi yang menjaga keterbacaan kode.

List Bersarang Hidup di Dalam li #

Aturannya satu kalimat: daftar bersarang ditempatkan di dalam elemen li milik daftar terluar, tepatnya setelah teks item dan sebelum tag penutup </li>. Dengan posisi tersebut, daftar anak menjadi bagian dari item induknya. Perhatikan potongan berikut:

html 
<ul>
  <li>Pengenalan HTML
    <ul>
      <li>Apa itu HTML</li>
      <li>Cara kerja browser</li>
    </ul>
  </li>
  <li>Struktur Dokumen</li>
</ul>

Output yang Dihasilkan:

text 
Browser menampilkan:
  - Pengenalan HTML
      - Apa itu HTML
      - Cara kerja browser
  - Struktur Dokumen

Item pertama kini menjalankan dua peran sekaligus: teks “Pengenalan HTML” sebagai butir daftar, sekaligus wadah bagi daftar anak di bawahnya. Browser menampilkan daftar anak dengan indentasi lebih dalam, dan bentuk bullet pada tingkat kedua umumnya berbeda dari tingkat pertama. Detail tampilan tersebut milik stylesheet bawaan browser dan dapat diatur ulang dengan CSS; yang perlu kita jaga hanyalah strukturnya.

Kesalahan Umum: List Sebagai Anak Langsung #

Kesalahan yang paling sering dijumpai adalah menaruh list kedua sebagai anak langsung list pertama, alias setara dengan li, bukan di dalam li. Dari layar, hasilnya kadang tampak mirip sehingga kesalahan ini lolos tanpa sadar. Dari sisi struktur, penempatan itu salah: content model ul hanya mengizinkan li sebagai anak, sebagaimana dibahas pada Chapter Unordered Lists. Validator menegakkan aturan tersebut dengan pesan Element ul not allowed as child of element ul in this context.

Indentasi sebagai Konvensi Keterbacaan #

Browser membaca struktur dari tag, bukan dari posisi kolom, sehingga indentasi tidak berpengaruh pada hasil render: spasi berlebih dihilangkan lewat whitespace collapsing yang telah kita pelajari pada section Teks dan Formatting. Meski demikian, kita tetap menjorokkan list bersarang satu tingkat pada setiap kedalaman. Kebiasaan itu bekerja bagi pembaca kode, bukan bagi browser: batas milik siapa tiap daftar langsung terlihat, dan list yang salah tempat lebih cepat tersudut. Tanpa indentasi, kode tetap valid, tetapi pada daftar tiga tingkat, kebingungan menunggu di baris penutup.

Contoh Lengkap: Daftar Isi Tiga Tingkat #

Contoh berikut menggabungkan dua arah nesting sekaligus: ul di dalam ol (topik di bawah bab) dan ol di dalam ul (subtopik berurutan di bawah topik). Simpan sebagai daftar-isi-kursus.html:

html daftar-isi-kursus.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Daftar Isi Kursus HTML</title>
</head>
<body>
  <h1>Daftar Isi Kursus HTML</h1>
  <ol>
    <li>Pengenalan HTML
      <ul>
        <li>Apa itu HTML
          <ol type="a">
            <li>Sejarah singkat</li>
            <li>Cara kerja browser</li>
          </ol>
        </li>
        <li>Persiapan lingkungan</li>
      </ul>
    </li>
    <li>Struktur Dokumen</li>
    <li>Links dan Navigasi</li>
  </ol>
</body>
</html>

Output yang Dihasilkan:

text 
Browser menampilkan tiga tingkat:
  1. Pengenalan HTML
       - Apa itu HTML
            a. Sejarah singkat
            b. Cara kerja browser
       - Persiapan lingkungan
  2. Struktur Dokumen
  3. Links dan Navigasi

Mari kita bedah baris demi baris, karena di sinilah seluruh aturan Chapter ini bertemu:

  1. Baris 9 (<h1>): judul halaman daftar isi.
  2. Baris 10 (<ol>): daftar terluar berbentuk ol karena bab selalu berurutan.
  3. Baris 11 (<li>Pengenalan HTML): item bab pertama; tag </li> belum ditutup karena daftar anak menyusul di dalamnya.
  4. Baris 12-20 (<ul>): list tingkat kedua di dalam li bab; topik tidak berurutan sehingga ul yang tepat.
  5. Baris 13 (<li>Apa itu HTML): topik pertama yang juga memuat daftar tingkat ketiga.
  6. Baris 14-17 (<ol type="a">): list tingkat ketiga di dalam li topik; subtopik berurutan, dan type="a" menampilkannya sebagai a, b.
  7. Baris 18 (</li>): penutup item topik, tepat setelah daftar tingkat ketiga berakhir.
  8. Baris 19 (<li>Persiapan lingkungan): topik kedua tanpa daftar anak; pola ini sah tanpa batasan.
  9. Baris 20-21 (</ul> lalu </li>): penutup list tingkat kedua, disusul penutup item bab.
  10. Baris 22-23: dua bab lainnya sebagai li biasa tanpa daftar anak.
  11. Baris 24 (</ol>): penutup daftar terluar.

Perhatikan urutan penutup pada baris 20-21: list anak ditutup lebih dulu, baru item induknya. Kebalikannya akan menghasilkan struktur yang kusut dan mudah ditandai validator.

Seluruh jenis list kini ada di genggaman kita, dari yang paling datar hingga tiga tingkat. Pertanyaan yang tersisa adalah soal pilihan: kapan ul, kapan ol, dan kapan dl? Chapter penutup section ini, Penggunaan Lists yang Tepat, merangkum semuanya menjadi satu panduan keputusan.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

daftar-isi-kursus.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Daftar Isi Kursus HTML</title>
</head>
<body>
  <h1>Daftar Isi Kursus HTML</h1>
  <ol>
    <li>Pengenalan HTML
      <ul>
        <li>Apa itu HTML
          <ol type="a">
            <li>Sejarah singkat</li>
            <li>Cara kerja browser</li>
          </ol>
        </li>
        <li>Persiapan lingkungan</li>
      </ul>
    </li>
    <li>Struktur Dokumen</li>
    <li>Links dan Navigasi</li>
  </ol>
</body>
</html>