List (daftar) dipakai buat menampilkan beberapa item berbaris, kayak daftar belanja atau langkah resep. HTML punya dua jenis utama: <ul> buat daftar bullet (pakai titik) dan <ol> buat daftar bernomor. Tiap item di dalamnya ditulis pakai <li>.
🧪 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>
<p>Makanan populer di Indonesia:</p>
<ul>
<li>Nasi Goreng</li>
<li>Mie Goreng</li>
<li>Soto Ayam</li>
<li>Bakso</li>
</ul>
<ul>(dari unordered list, daftar tanpa urutan) membungkus seluruh daftar.</ul>menutupnya.<li>(dari list item) membungkus satu item. Satu item, satu<li>, dan tiap item ditutup</li>.Nasi Gorengadalah teks itemnya.
Hasilnya: empat makanan, masing-masing di barisnya sendiri dengan bullet di depannya. <li> selalu ditulis di dalam <ul> atau <ol>, dan isi langsung <ul> cuma boleh <li>.
Daftar bernomor: <ol>
Item-nya tetap <li>. Yang ganti cuma pembungkusnya, jadi <ol> (dari ordered list, daftar berurutan):
<ol>
<li>Ambil sebuah biskuit Oreo</li>
<li>Putar sampai kedua lapisannya terpisah</li>
<li>Jilat krim di tengahnya</li>
</ol>
Browser menambahkan nomor 1, 2, 3 sendiri. Kamu gak perlu mengetik nomornya.
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
Sub-daftar ditulis di dalam <li> induknya, sebelum </li> item itu. Bukan di antara dua item.
<ul>
<li>Nasi Goreng</li>
<li>Bakso
<ul>
<li>Bakso urat</li>
<li>Bakso telur</li>
</ul>
</li>
</ul>
<li>Baksodibuka, tapi belum ditutup.- Di dalamnya ada
<ul>baru berisi dua sub-item. - Sesudah sub-daftarnya selesai, baru
</li>menutup item Bakso.
Hasilnya: Bakso punya dua sub-item yang menjorok ke dalam. Daftar ini punya empat <li> total: dua di luar, dua di dalam.
⚠️ 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>. Kalau membalik urutannya mengubah arti, pakai <ol>, kalau enggak, <ul>. Sub-daftar ditulis di dalam <li> induknya, sebelum </li>-nya.
