Daftar Bertingkat

Aturan bersarang sudah kita pegang; sekarang waktunya berlatih pada struktur yang nyata. Daftar bertingkat dipakai untuk memetakan halaman, merencanakan isi dokumen, dan mengelompokkan bahan resep — kebutuhan yang muncul di hampir setiap proyek.

Chapter ini merangkum empat pola bertingkat yang paling sering dipakai, lalu menyusun peta situs tiga tingkat sebagai contoh utuh.

Empat Pola Bertingkat #

Pola resep layak diperhatikan: bahan dikelompokkan menjadi “bahan utama” dan “bumbu” pada tingkat luar, lalu tiap kelompok memuat butir bahan pada tingkat dalam. Pengelompokan dua tingkat ini membuat daftar belanjaan Siti tetap mudah dipindai meski jumlah butirnya banyak.

Kombinasi ol di Dalam ul #

Jenis list tidak harus seragam antar tingkat. Aturan pemilihannya tetap berlaku per daftar: tingkat luar berupa kategori yang urutannya netral memakai ul, sedangkan tingkat dalam berupa langkah yang urutannya bermakna memakai ol. Contoh jadwal workshop seduh:

<ul>
  <li>Sesi pagi
    <ol>
      <li>Pengenalan alat seduh.</li>
      <li>Latihan menggiling biji.</li>
    </ol>
  </li>
  <li>Sesi siang
    <ol>
      <li>Praktik pour over.</li>
      <li>Uji rasa tiga seduhan.</li>
    </ol>
  </li>
</ul>

Hasil Render:

Mari kita telaah kode di atas:

1. ul luar: dua sesi — urutannya bisa ditukar tanpa mengubah isi pelatihan, jadi kategori bersifat netral.
2. ol dalam tiap sesi: langkah latihan wajib berurutan, sehingga butirnya bernomor.
3. Penanda campur: kategori bertanda bulatan, langkah bertanda angka; browser menampilkan campuran keduanya secara bawaan.

Contoh: Peta Situs Tiga Tingkat #

Peta situs disusun sebelum halaman dibuat — ia menjadi rencana struktur sekaligus daftar periksa halaman. Berikut peta situs situs Kedai Kopi Siti dengan tiga tingkat:

<ul>
  <li>Beranda</li>
  <li>Tentang
    <ul>
      <li>Cerita Kedai</li>
      <li>Tim Kami
        <ul>
          <li>Budi — pemilik</li>
          <li>Siti — kepala barista</li>
          <li>Dewi — pengelola media sosial</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Menu</li>
  <li>Kontak</li>
</ul>

Hasil Render:

Mari kita telaah kode di atas:

1. Tingkat pertama (Beranda sampai Kontak): empat halaman utama situs.
2. Tingkat kedua (dalam butir “Tentang”): dua halaman anak — sub-daftar ditulis di dalam li “Tentang”, setelah teksnya.
3. Tingkat ketiga (dalam butir “Tim Kami”): daftar anggota tim berada di dalam li “Tim Kami” — setiap sub-daftar selalu berada di dalam butir induknya, berapa pun tingkatnya.
4. Urutan penutup: setiap sub-daftar ditutup lebih dulu sebelum </li> induknya — urutan cermin yang dibahas pada chapter Nested Elements.

Ringkasan #

• Empat pola umum: daftar isi, peta situs, kategori bahan resep, dan jadwal.
• Jenis list dipilih per tingkat: kategori netral ul, langkah berurutan ol.
• Sub-daftar selalu berada di dalam li induknya, pada tingkat berapa pun.
• Penanda tiap tingkat bisa dibedakan lewat CSS di kemudian hari.

Dengan tiga jenis list dan teknik bersarang di tangan, chapter berikutnya melatih keputusan yang paling penting: memilih jenis list yang tepat.