HTML7 / 46

Daftar Bersarang

Menu dan daftar isi sering punya sub-item. Cara menulisnya sering salah: <ul> anak harus berada di dalam `<li>` induknya, bukan sebagai saudara di antara dua <li>. Kalau ditaruh langsung di bawah <ul> tanpa dibungkus <li>, HTML-nya tidak valid dan hubungan induk-anak hilang bagi screen reader — pengguna tidak tahu sub-item itu milik item yang mana. Perhatikan juga indentasi: setiap tingkat menjorok satu langkah supaya struktur bersarangnya terbaca saat kamu membaca ulang kodemu nanti.

👀 Contoh dulu

<ul>
  <li>Minuman
    <ul>
      <li>Kopi</li>
      <li>Teh</li>
    </ul>
  </li>
  <li>Makanan</li>
</ul>

Hasilnya: Dua item utama, dan di bawah 'Minuman' muncul dua sub-item yang menjorok ke dalam.

📝 Sekarang giliranmu

Buat daftar dua tingkat: item Frontend yang di dalamnya berisi sub-daftar dengan dua item, HTML dan CSS. Pastikan sub-daftarnya berada di dalam item induknya.

Preview