Daftar (List) HTML Lengkap: Ordered, Unordered, dan Description List

Daftar ada di mana-mana di web. Menu navigasi, langkah-langkah tutorial, poin-poin fitur, daftar FAQ, spesifikasi produk — coba bongkar hampir semua halaman, pasti ada list di baliknya. Kelihatannya sepele, dan markup dasarnya memang sederhana, tapi sebenarnya bahasannya cukup dalam: ada tiga jenis list yang beda-beda, beberapa atribut yang mengatur cara penomoran, aturan untuk menyusun list bertingkat, dan beberapa detail aksesibilitas yang membedakan markup asal-asalan dengan markup yang rapi.

Artikel ini akan membawamu dari “saya bisa bikin daftar berpoin” jadi “saya tahu persis list mana yang harus dipakai dan cara mengaturnya.” Kalau kamu sudah baca materi HTML sebelumnya — seperti apa itu HTML dan atribut HTML — fondasi yang kamu butuhkan sudah lengkap. Sekarang tinggal kita lanjutkan.

Tiga jenis daftar

HTML menyediakan tiga elemen list, dan ketiganya tidak bisa saling tukar. Memilih yang tepat itu sudah setengah dari keterampilannya:

Unordered list (<ul>) — sekumpulan item yang urutannya tidak penting. Secara default ditampilkan dengan bullet (titik).
Ordered list (<ol>) — sebuah urutan yang urutannya memang penting. Secara default ditampilkan dengan angka.
Description list (<dl>) — pasangan istilah dan penjelasannya, seperti glosarium.

Dua yang pertama adalah andalan yang akan kamu pakai tiap hari. Yang ketiga lebih jarang dipakai, tapi sebenarnya berguna sekali begitu kamu tahu ada elemen ini. Kita bahas satu per satu.

Unordered list dengan `<ul>`

Unordered list adalah kumpulan item yang tidak punya urutan baku — daftar belanja, kumpulan fitur, atau tag di sebuah artikel. Kamu membuatnya dengan pembungkus <ul> dan satu <li> (list item) untuk tiap entri:

<ul>
  <li>Kopi</li>
  <li>Susu</li>
  <li>Roti</li>
</ul>

Secara default, browser menampilkan tiap item dengan sebuah bullet. Inti yang perlu kamu pegang adalah maknanya: dengan memakai <ul>, kamu memberi tahu browser, mesin pencari, dan pembaca layar bahwa “benda-benda ini satu kelompok, dan urutannya tidak punya arti khusus.” Ditukar-tukar urutannya pun, makna list-nya tidak berubah.

Setiap anak langsung dari <ul> haruslah <li>. Kamu tidak menaruh paragraf atau heading langsung di dalam <ul> — kalau butuh, taruh di dalam sebuah <li>:

<ul>
  <li>
    <strong>Gratis ongkir</strong>
    <p>Untuk semua pesanan di atas Rp500.000, tanpa kode.</p>
  </li>
  <li>
    <strong>Mudah retur</strong>
    <p>Ada 30 hari untuk berubah pikiran.</p>
  </li>
</ul>

Sebuah <li> bisa memuat apa saja — teks, tautan, gambar, bahkan list lain. Dia itu wadah yang fleksibel, bukan cuma slot satu baris.

Bullet itu soal tampilan, bukan makna

Titik-titik yang kamu lihat hanyalah tampilan bawaan browser, yang diatur properti CSS list-style. Kamu bisa mengubahnya jadi kotak, lingkaran, gambar kustom, atau menghilangkannya sama sekali. Persis begitulah cara menu navigasi dibuat: sebuah <ul> berisi tautan, dengan bullet-nya dimatikan lewat CSS. Elemennya tetap bermakna “sebuah daftar” walaupun tampilannya tidak seperti daftar — dan itu bagus untuk aksesibilitas.

Ordered list dengan `<ol>`

Kalau urutan itu penting — langkah dalam resep, hasil yang diperingkat, atau prosedur bernomor — pakailah <ol>. Markup-nya sama persis dengan <ul>; kamu cuma mengganti pembungkusnya:

<ol>
  <li>Panaskan oven sampai 180°C.</li>
  <li>Campur bahan-bahan kering.</li>
  <li>Masukkan telur lalu aduk.</li>
  <li>Panggang selama 25 menit.</li>
</ol>

Browser menomori item secara otomatis — 1, 2, 3, 4 — dan yang paling penting, penomorannya tetap benar kalau kamu menambah, menghapus, atau menukar urutan item. Kamu tidak pernah mengetik angkanya sendiri, jadi kamu bisa menyusun ulang langkah dengan bebas tanpa harus menomori ulang secara manual.

Perbedaan maknanya itulah intinya: sebuah <ol> berkata “urutan item-item ini punya arti.” Pakai <ol> kalau menukar urutan item bakal merusak makna, dan pakai <ul> kalau tidak. “Langkah memasang aplikasi” itu <ol>. “Alasan aplikasi kami bagus” itu <ul>.

Mengatur penomoran

<ol> punya sejumlah atribut yang membuatmu bisa mengatur bagaimana angkanya muncul. Ini yang perlu kamu tahu:

type mengubah gaya penanda. Defaultnya angka desimal, tapi kamu bisa beralih ke huruf atau angka Romawi:

<ol type="A">
  <li>Pilihan pertama</li>  <!-- A -->
  <li>Pilihan kedua</li>    <!-- B -->
</ol>

Nilainya bisa 1 (angka, default), A (huruf kapital), a (huruf kecil), I (Romawi kapital), dan i (Romawi kecil).

start menentukan dari angka berapa list mulai dihitung. Berguna saat sebuah daftar terpotong di antara beberapa bagian tapi hitungannya harus tetap nyambung:

<ol start="5">
  <li>Item kelima</li>  <!-- 5 -->
  <li>Item keenam</li>  <!-- 6 -->
</ol>

reversed menghitung mundur, bukan maju — pas banget buat hitung mundur “5 besar”:

<ol reversed>
  <li>Perunggu</li>  <!-- 3 -->
  <li>Perak</li>     <!-- 2 -->
  <li>Emas</li>      <!-- 1 -->
</ol>

Lalu ada satu atribut yang justru menempel di <li> itu sendiri: value membuat satu item meloncat ke angka tertentu, dan item setelahnya melanjutkan dari situ:

<ol>
  <li>Satu</li>             <!-- 1 -->
  <li value="10">Sepuluh</li> <!-- 10 -->
  <li>Sebelas</li>          <!-- 11 -->
</ol>

type mengubah tampilan — value dan start mengubah hitungan

Tiga atribut ini gampang ketukar. type cuma memengaruhi tampilan penandanya (angka vs huruf vs Romawi). Sementara start, reversed, dan value memengaruhi hitungan yang sebenarnya — angka berapa yang didapat tiap item. Kalau nanti kamu menata list-nya pakai CSS, CSS-lah yang mengurus tampilan, sedangkan atribut penghitung ini tetap yang menentukan angkanya di belakang layar. Pakai start/value saat angkanya sendiri harus spesifik, bukan sekadar gayanya.

Description list dengan `<dl>`

Jenis ketiga ini yang paling sering dilupakan orang. Description list dipakai untuk pasangan nama–nilai: sebuah istilah dan definisinya, sebuah label dan datanya. Bayangkan glosarium, metadata, atau lembar spesifikasi key-value. Elemennya ada tiga dan dipakai bersamaan:

<dl> — pembungkus seluruh daftar.
<dt> — istilah (term) yang dijelaskan.
<dd> — penjelasan (description) dari istilah itu.

<dl>
  <dt>HTML</dt>
  <dd>Bahasa markup yang menyusun struktur konten web.</dd>

  <dt>CSS</dt>
  <dd>Bahasa yang mengatur tampilan konten tadi.</dd>

  <dt>JavaScript</dt>
  <dd>Bahasa yang menambahkan perilaku dan interaktivitas.</dd>
</dl>

Ini bukan sekadar tata letak dua kolom yang dipoles — dia membawa makna yang nyata. Markup-nya secara eksplisit berkata “istilah ini berpasangan dengan penjelasan ini,” sebuah informasi yang tidak akan pernah bisa disampaikan oleh <ul> berisi paragraf. Description list adalah pilihan yang jujur dan semantik untuk setiap pasangan istilah-dan-penjelasan.

Kamu juga tidak terkunci pada pasangan satu-lawan-satu. Satu istilah boleh punya beberapa penjelasan, dan beberapa istilah boleh berbagi satu penjelasan:

<dl>
  <dt>Kopi</dt>
  <dt>Espresso</dt>
  <dd>Minuman panas berkafein.</dd>

  <dt>Penulis</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
</dl>

Pas banget untuk metadata

Description list bersinar untuk menampilkan detail terstruktur — spesifikasi produk, penulis dan tanggal terbit sebuah artikel, atau field-field di sebuah profil. Di mana pun ada sekumpulan baris “label: nilai”, <dl> lebih bermakna ketimbang menjejalkan semuanya ke dalam <div> atau daftar berpoin biasa. Ini elemen yang kurang dimanfaatkan, padahal bikin markup-mu jauh lebih deskriptif.

List bertingkat (nesting)

List bisa berada di dalam list lain, dan begitulah cara kamu membangun sub-poin serta menu bertingkat. Aturannya tegas: list bertingkat itu diletakkan di dalam sebuah <li>, bukan langsung di dalam <ul> atau <ol> induknya. List anak menjadi bagian dari item yang menjadi induknya.

<ul>
  <li>Buah
    <ul>
      <li>Apel</li>
      <li>Pisang</li>
    </ul>
  </li>
  <li>Sayur
    <ul>
      <li>Wortel</li>
      <li>Bayam</li>
    </ul>
  </li>
</ul>

Perhatikan bagaimana <ul> bertingkat itu berada di antara teks “Buah” dan penutup </li> — dia terselip di dalam list item, bukan mengambang di antara item. Browser otomatis memberi indentasi tiap tingkat dan mengganti gaya bullet makin dalam, sehingga kamu mendapat tampilan kerangka yang familiar itu.

Kamu juga bebas mencampur jenisnya. Ordered list berisi langkah bisa memuat unordered list berisi catatan tambahan, dan sebaliknya:

<ol>
  <li>Daftarkan sebuah akun
    <ul>
      <li>Pakai alamat email yang aktif</li>
      <li>Pilih kata sandi yang kuat</li>
    </ul>
  </li>
  <li>Verifikasi email-mu</li>
  <li>Lengkapi profilmu</li>
</ol>

Jangan taruh list langsung di dalam ul atau ol

Kesalahan yang umum adalah menulis <ul> langsung di dalam <ul> lain tanpa ada <li> yang membungkusnya. Itu tidak valid — satu-satunya anak langsung yang sah untuk <ul>/<ol> adalah <li>. List bertingkat harus berada di dalam sebuah <li>. Kalau hasil nesting-mu tampil aneh atau indentasinya kelihatan berantakan, coba cek apakah tiap sub-list sudah dibungkus item induknya. Selalu tutup tiap <li> setelah list bertingkatnya, bukan sebelumnya.

List sebagai tulang punggung navigasi

Ini sering bikin pemula kaget: kebanyakan menu navigasi di web sebenarnya adalah unordered list. Alasannya semantik — sebuah menu navigasi itu memang sekumpulan tautan tanpa urutan wajib, dan itu persis makna dari <ul>. Bullet-nya tinggal dihilangkan pakai CSS.

<nav>
  <ul>
    <li><a href="/">Beranda</a></li>
    <li><a href="/about">Tentang</a></li>
    <li><a href="/products">Produk</a></li>
    <li><a href="/contact">Kontak</a></li>
  </ul>
</nav>

Membungkus tautan di dalam <ul> yang ada di dalam <nav> memberi tahu teknologi bantu bahwa “ini blok navigasi berisi daftar dengan N tautan.” Pengguna pembaca layar jadi tahu menu itu punya berapa item sebelum menelusurinya satu per satu. Bikin menu yang sama dari tag <a> polos di dalam <div>, dan semua keuntungan itu hilang. List-nya tetap mengerjakan tugas penting walaupun, secara visual, akhirnya tampak sama sekali bukan seperti list. Kalau kamu sudah membaca soal struktur semantik, inilah prinsip itu dalam praktiknya.

Aksesibilitas dan kebiasaan baik

List sebenarnya sudah aksesibel secara default — itu hadiah dari memakai elemen yang benar. Beberapa kebiasaan ini menjaganya tetap begitu:

Pakai elemen yang sesuai maknanya. Urutan penting → <ol>. Tidak ada urutan → <ul>. Pasangan istilah–penjelasan → <dl>. Jangan memilih berdasarkan kebetulan tampilan penandanya; pilih berdasarkan konten itu apa.
Jangan bikin list palsu. Baris teks yang dipisah pakai <br>, atau tumpukan <div>, mungkin terlihat seperti list tapi tidak berarti apa-apa bagi teknologi bantu. Pembaca layar mengumumkan list asli (“daftar, 4 item”) supaya pengguna bisa menavigasinya — tumpukan div tidak memberi informasi itu sama sekali.
Jaga <li> sebagai anak langsung. Hanya <li> yang boleh langsung di dalam <ul>/<ol> (dan hanya <dt>/<dd> di dalam <dl>). Selain itu, taruh di dalam item-item tersebut.
Biarkan CSS yang mengurus tampilan. Butuh tanpa bullet, penanda kustom, atau menu mendatar? Itu urusan styling. HTML-nya tetap berupa list yang bersih dan bermakna, dan kamu mengubah tampilannya secara terpisah.

Bikin kerangkanya pakai tool, tapi tetap pahami

Saat kamu mengetik list panjang secara manual, gampang sekali keliru — </li> yang kelupaan, sub-list yang salah tempat. Tool seperti HTML list generator bisa menyusunkan markup <ul>/<ol> yang valid sebagai titik awalmu. Pakai untuk hemat ketik, tapi pastikan kamu bisa membaca hasilnya — paham kenapa strukturnya benar itulah yang bikin kamu makin jago HTML, bukan sekadar bergantung pada generator-nya.

Kapan pakai yang mana — ringkasan cepat

Lewatkan konten apa pun melalui pertanyaan-pertanyaan ini, dan elemen yang tepat langsung ketemu:

Apakah urutannya penting? Ya → <ol>. Tidak → <ul>.
Apakah ini pasangan istilah-dan-penjelasan? → <dl> dengan <dt> dan <dd>.
Apakah ini menu navigasi atau kumpulan tautan/fitur? → <ul> (urutan tidak penting).
Apakah ini langkah bernomor atau peringkat? → <ol>, dan pakai start/reversed/value kalau penomorannya perlu disesuaikan.

Kalau dua pilihan kelihatan sama-sama cocok, tanyakan dulu soal urutan — pertanyaan itu langsung menyelesaikan sebagian besar kasus.

Penutup

List adalah salah satu struktur HTML yang paling sering dipakai, dan sekarang kamu sudah melihat ketiganya secara utuh:

<ul> adalah unordered list — berpoin secara default, untuk kelompok yang urutannya tidak relevan.
<ol> adalah ordered list — bernomor secara default, untuk urutan yang urutannya penting. Atribut type, start, reversed, dan value memberimu kontrol penuh atas penomorannya.
<dl> adalah description list — pasangan istilah (<dt>) dan penjelasan (<dd>), pas untuk glosarium dan metadata.
Nesting dilakukan dengan menaruh sub-list di dalam sebuah <li>, dan kamu bebas mencampur jenisnya.
Menu navigasi adalah unordered list dengan bullet yang ditata habis lewat CSS — contoh sempurna dari mengutamakan makna ketimbang tampilan.

Inti besarnya: list itu soal makna, bukan soal bullet dan angka. Pilih elemen yang menggambarkan kontenmu dengan jujur, dan kamu dapat markup yang bersih, aksesibilitas gratis, serta styling yang mudah dikontrol. Dari sini, langkah selanjutnya yang paling pas adalah belajar menata list ini dengan CSS — mengganti penanda, mengatur spasi, dan menyulap menu vertikal jadi navbar mendatar.