listdldefinisiPemula3 mnt baca

Description List: dl, dt, dd

Tampilkan pasangan istilah-definisi dengan rapi memakai dl, dt, dan dd.

Analogi: Kamus di Rak Bukumu

Buka kamus bahasa Inggris. Kamu melihat pola yang selalu sama: kata kunci dicetak tebal di kiri, lalu diikuti penjelasannya. "Serendipity: penemuan kebetulan yang menyenangkan." Istilah dan definisinya selalu berpasangan, tidak pernah tercampur aduk.

<dl> (description list) adalah kamus versi HTML. dt (description term) adalah kata kuncinya, dd (description details) adalah penjelasannya. Setiap kali kamu punya data berbentuk pasangan "nama dan keterangannya", seperti glosarium, FAQ, atau spesifikasi produk, dl adalah wadah yang paling tepat.

Kenapa Tidak Pakai div atau Tabel Saja

Pemula biasanya menampilkan pasangan istilah-definisi dengan dua div bertumpuk atau satu paragraf panjang: "HTML: bahasa markup... CSS: bahasa tampilan...". Terlihat rapi di layar, tapi browser tidak tahu kata mana yang istilah dan mana yang definisi. Screen reader membacanya sebagai teks biasa tanpa relasi.

<dl> memecahkan ini dengan menyatakan relasinya secara eksplisit. Browser memberi indentasi otomatis pada dd, screen reader mengumumkan "istilah: HTML, definisi: bahasa markup untuk struktur halaman web", dan mesin pencari bisa mengekstrak pasangan ini sebagai data terstruktur. Bahkan untuk FAQ, Google kadang menampilkan pasangan tanya-jawab dari dl langsung di hasil pencarian sebagai rich snippet. Struktur yang benar membuka peluang yang tidak didapat dari div biasa.

Contoh 1: Paling Sederhana

html

<dl>
  <dt>HTML</dt>
  <dd>Bahasa markup untuk struktur halaman web.</dd>
  <dt>CSS</dt>
  <dd>Bahasa untuk mengatur tampilan halaman web.</dd>
</dl>

Polanya selalu berpasangan: dt dulu, lalu dd. Urutan ini wajib, karena dd menjelaskan dt yang tepat berada sebelumnya. Anggap seperti kamus: kata dulu, baru artinya.

Contoh 2: Satu Istilah, Banyak Penjelasan

Fleksibilitas dl muncul di contoh yang lebih realistis, misalnya halaman FAQ sebuah warkop:

html

<dl>
  <dt>Jam berapa warkop buka?</dt>
  <dd>Setiap hari pukul 08.00 sampai 22.00.</dd>
  <dd>Hari Jumat buka pukul 13.00 setelah salat Jumat.</dd>

  <dt>Kopi Tubruk</dt>
  <dt>Kopi Hitam</dt>
  <dd>Kopi tanpa ampas disaring, diseduh langsung dengan air panas.</dd>
</dl>

Dua pola lanjutan terlihat di sini. Pertama, satu dt boleh diikuti beberapa dd (satu pertanyaan, dua jawaban pelengkap). Kedua, beberapa dt boleh berbagi satu dd (dua nama untuk minuman yang sama). Ini jauh lebih ekspresif daripada daftar biasa, dan tetap valid selama urutannya dt sebelum dd.

Kesalahan Umum Pemula

Salah: memakai paragraf biasa untuk pasangan istilah-definisi.

html

<p><b>HTML:</b> bahasa markup untuk struktur halaman web.</p>
<p><b>CSS:</b> bahasa untuk tampilan halaman web.</p>

Benar: pakai dl supaya relasinya eksplisit.

html

<dl>
  <dt>HTML</dt>
  <dd>Bahasa markup untuk struktur halaman web.</dd>
  <dt>CSS</dt>
  <dd>Bahasa untuk tampilan halaman web.</dd>
</dl>

Kenapa salah? Versi paragraf hanya mengandalkan titik dua dan teks tebal untuk menyiratkan relasi. Mesin tidak bisa memastikan "HTML" adalah istilah dan sisanya definisi. Dengan dl, relasinya dinyatakan langsung oleh tagnya, bukan ditebak dari tampilannya.

Salah: dd ditulis sebelum dt.

html

<dl>
  <dd>Bahasa markup untuk struktur halaman web.</dd>
  <dt>HTML</dt>
</dl>

Benar: istilah dulu, baru penjelasannya.

html

<dl>
  <dt>HTML</dt>
  <dd>Bahasa markup untuk struktur halaman web.</dd>
</dl>

Kenapa salah? dd menjelaskan dt yang mendahuluinya. Kalau dibalik, browser dan screen reader mengaitkan definisi ke istilah yang salah, atau ke tidak ada istilah sama sekali. Sama anehnya dengan menulis arti kata sebelum katanya di kamus.

Salah: membungkus tiap pasangan dengan div yang tidak perlu.

html

<dl>
  <div>
    <dt>HTML</dt>
    <dd>Bahasa markup.</dd>
  </div>
</dl>

Benar: biarkan dt dan dd menjadi anak langsung dl.

html

<dl>
  <dt>HTML</dt>
  <dd>Bahasa markup.</dd>
</dl>

Kenapa salah? Sebenarnya HTML mengizinkan div sebagai pembungkus grup di dalam dl, tapi pemula memakainya tanpa alasan, biasanya karena kebiasaan membungkus semua dengan div. Untuk kasus sederhana, pembungkus itu hanya menambah kerumitan tanpa manfaat. Pakai div di dalam dl hanya kalau kamu benar-benar butuh menata satu grup istilah-definisi dengan CSS.

Catatan teknis: Dulu tag ini bernama "definition list", lalu HTML5 mengganti maknanya menjadi "description list" karena kegunaannya lebih luas dari sekadar definisi: metadata dokumen, dialog naskah, sampai daftar harga. Nama tagnya tetap dl, jadi jangan bingung kalau menemukan istilah lama di tutorial lain.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Bikin FAQ

Buat FAQ berisi 3 pertanyaan memakai dl: tiap pertanyaan sebagai dt, tiap jawaban sebagai dd. Pertanyaannya tentang warung kopimu (jam buka, lokasi, pembayaran). Tantangan ini melatihmu memodelkan data berpasangan dengan tag yang tepat, skill yang dipakai di dunia nyata setiap kali kamu membangun halaman FAQ, dokumentasi API, atau spesifikasi produk.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>FAQ</title>
</head>
<body>
  <h1>Pertanyaan Umum</h1>
  <!-- tulis dl di sini -->
</body>
</html>

Open Sandbox