Coba bayangin bikin resep tanpa list — semua langkah disambungin pake titik koma jadi satu paragraf raksasa. Mata orang bakal langsung ngabur. List bikin info bertumpuk-tumpuk jadi gampang di-scan. HTML kasih dua jenis:
- Ordered List (
<ol>) — pake nomor, urutan PENTING. Contoh: resep masak ("cuci dulu, BARU potong"), tutorial step-by-step. - Unordered List (
<ul>) — pake bullet, urutan BEBAS. Contoh: daftar belanja (telur, susu, roti — boleh dibalik gak ngaruh).
🤔 Salah pilih = salah makna. Kalau kamu pake
<ul>buat resep, secara semantik kamu bilang "urutan langkah masak gak penting" — yang jelas-jelas bohong. Pilih tag yang sesuai makna, bukan yang sesuai tampilan default.
Sintaks <ul> & <ol>
Bungkus container dengan <ul> atau <ol>, tiap item bungkus <li>:
<ul>
<li>Nasi Padang</li>
<li>Bakso</li>
</ul>
🎭 Analogi sehari-hari
<ol> = resep langkah-langkah (urutan penting: cuci dulu, baru potong). <ul> = daftar belanja (urutan bebas: telur, susu, roti — boleh dibalik).
⚠️ Jebakan yang sering ditemui
<li>di luar<ul>/<ol>= invalid. Browser tetap render tapi struktur rusak.- List bisa nested —
<ul>di dalam<li>untuk sub-item. - Custom bullet via teks ("- Nasi Padang") = jangan. Pakai
<ul>lalu CSSlist-style. - Definition list
<dl>+<dt>+<dd>sering terlupa untuk daftar istilah/glosarium — lebih semantik dari<ul>+:. type="A"di<ol>untuk huruf — sering dipakai untuk outline kompleks.
🎯
<ol>vs<ul>vs<dl>— pilih yang mana?
- Urutan PENTING (resep, tutorial, top 10 ranking) →
<ol>- Urutan BEBAS (daftar belanja, fitur produk, navigasi) →
<ul>- Pasangan istilah + definisi (glossary, FAQ, spec table) →
<dl>+<dt>+<dd>Tes cepat: kalau dibalik urutannya makna ikut berubah →
<ol>. Kalau gak ngaruh →<ul>.<dl>= "kata + arti" pasangan.
TL;DR: <ol> (ordered, bernomor) buat urutan PENTING (resep, tutorial, ranking). <ul> (unordered, bullet) buat urutan BEBAS (daftar belanja, fitur). <dl> + <dt> + <dd> buat pasangan istilah-definisi (glossary, FAQ). Tiap item bungkus <li>. Pilih tag berdasar makna (apakah urutan penting), bukan tampilan default.
