Daftar belanja, langkah resep, peringkat lagu favorit: semuanya daftar. Di halaman web, daftar (list) tampil sebagai item yang berbaris ke bawah, dengan bullet (titik kecil) atau nomor di depan tiap item.
🧪 Tebakan cepat: langkah-langkah resep lebih cocok pakai bullet atau nomor? Tebak dulu, jawabannya ada di bagian "Pilih
<ul>atau<ol>".
Daftar bullet: <ul> dan <li>
Daftar bullet butuh dua tag. <ul> membungkus seluruh daftar, dan <li> membungkus tiap item di dalamnya:
<p>Makanan populer di Indonesia:</p>
<ul>
<li>Nasi Goreng</li>
<li>Mie Goreng</li>
<li>Soto Ayam</li>
<li>Bakso</li>
</ul>
<p>di baris pertama cuma paragraf pembuka biasa.<ul>(dari unordered list, daftar tanpa urutan) membuka daftar.</ul>di baris terakhir menutupnya.<li>(dari list item) membuka satu item,</li>menutupnya. Satu item, satu pasang<li>dan</li>.Nasi Gorengadalah teks item yang tampil.
Hasilnya: kalimat pembuka, lalu empat makanan, masing-masing di barisnya sendiri dengan bullet di depannya. Spasi di depan <li> cuma biar kodenya rapi, browser mengabaikannya.
Daftar bernomor: <ol>
Item-nya tetap <li>. Yang ganti cuma pembungkusnya, jadi <ol> (dari ordered list, daftar berurutan):
<ol>
<li>Ambil satu biskuit Oreo</li>
<li>Putar sampai kedua lapisannya terpisah</li>
<li>Jilat krim di tengahnya</li>
</ol>
Hasilnya: tiga langkah dengan nomor 1, 2, 3 di depannya. Nomornya ditambahkan browser, jadi kamu gak perlu mengetiknya.
Pilih <ul> atau <ol>
Tes gampangnya: bayangin urutannya dibalik. Kalau artinya berubah (resep, langkah instalasi, peringkat), pakai <ol>. Kalau gak ngaruh (daftar belanja, daftar fitur), pakai <ul>. Jadi pilih dari maknanya, bukan dari tampilannya. Bentuk bullet atau nomornya nanti bisa diubah pakai CSS.
Daftar di dalam daftar
Kadang satu item punya rincian, misalnya Bakso ada dua macam. Rinciannya jadi sub-daftar, yang ditulis di dalam <li> induknya:
<ul>
<li>Bakso
<ul>
<li>Bakso urat</li>
<li>Bakso telur</li>
</ul>
</li>
<li>Nasi Goreng</li>
</ul>
Baca pelan-pelan dari atas:
<li>Baksomembuka item pertama.</li>-nya belum ditulis, karena rinciannya mau masuk dulu.- Masih di dalam item Bakso, ada
<ul>baru dengan dua<li>. Itulah sub-daftarnya. </ul>menutup sub-daftar. Baru sesudahnya</li>menutup item Bakso.<li>Nasi Goreng</li>adalah item kedua di daftar luar.
Hasilnya: Bakso, lalu Bakso urat dan Bakso telur menjorok ke dalam di bawahnya, lalu Nasi Goreng sejajar lagi dengan Bakso. Totalnya empat <li>: dua di daftar luar, dua di sub-daftar.
Kenapa sub-daftarnya gak ditaruh di antara dua item aja? Karena tepat di dalam <ul> atau <ol>, yang boleh ada cuma <li>. Jadi sub-daftar harus masuk ke dalam salah satu <li>.
⚠️ Jebakan yang sering ketemu
- Teks di luar
<li>.</li>Item 2gak jadi item baru. Tiap item butuh<li>dan</li>-nya sendiri. - Mengetik nomor sendiri.
<li>1. Nasi Goreng</li>di dalam<ol>tampil dobel: "1. 1. Nasi Goreng". - Bikin bullet dari teks. Menulis "- Nasi Goreng" di paragraf memang kelihatan kayak daftar, tapi buat browser dan screen reader itu cuma teks biasa.
TL;DR: Daftar bullet pakai <ul>, daftar bernomor pakai <ol>, dan tiap item dibungkus <li>. Nomornya ditambahkan browser. Kalau membalik urutannya mengubah arti, pakai <ol>, kalau enggak, <ul>. Sub-daftar ditulis di dalam <li> induknya, sebelum </li>-nya.
