Dua jenis list sebelumnya memuat butir tunggal — satu teks, satu gambar, satu tautan per li. Kebutuhan berbeda muncul ketika informasi berbentuk pasangan: istilah dan definisinya, pertanyaan dan jawabannya, label dan nilainya. Untuk pola itu HTML menyediakan description list.

Chapter ini membahas struktur dl beserta pasangan dt-dd, aturan fleksibilitas pasangannya, dan satu fakta menarik mengenai pembungkus div di dalamnya.

Struktur dl, dt, dan dd #

Elemen dl (description list) tidak lagi memakai li. Isinya dua elemen yang bekerja berpasangan: dt (description term) sebagai istilah yang dijelaskan, dan dd (description details) sebagai deskripsinya. Perbedaan mendasar dari ul dan ol: pasangan dt-dd ditulis berurutan langsung di dalam dl, tanpa pembungkus khusus per pasangan.

Contoh berikut adalah glosarium kopi dengan tiga istilah:

html 
<dl>
  <dt>Arabika</dt>
  <dd>Biji kopi dengan rasa asam lembut dan aroma floral.</dd>
  <dt>Robusta</dt>
  <dd>Biji kopi dengan rasa pahit kuat dan kadar kafein tinggi.</dd>
  <dt>Tubruk</dt>
  <dd>Cara seduh dengan menuang air panas langsung ke bubuk kopi.</dd>
</dl>

Hasil Render:

Mari kita telaah kode di atas:

  1. Baris 1 (<dl>): wadah description list — penanda bahwa isinya kumpulan pasangan istilah-deskripsi.
  2. <dt>...</dt>: tiga istilah yang didefinisikan; dt tidak diberi penanda apa pun.
  3. <dd>...</dd>: deskripsi tiap istilah; browser menjorokkannya dari kiri secara bawaan.
  4. Tanpa li: tidak ada pembungkus per pasangan — dt dan dd berselang-seling langsung di dalam dl.

Pemakaian umumnya: glosarium, FAQ (dt pertanyaan, dd jawaban), dan metadata seperti label produk berpasangan nilai.

Fleksibilitas Pasangan #

Relasi dt dan dd tidak harus satu-satu. Aturannya longgar di dua arah: satu dt boleh mempunyai beberapa dd, dan beberapa dt beruntun boleh berbagi satu dd — biasanya untuk sinonim:

html 
<dl>
  <dt>Kopi susu</dt>
  <dt>Kopsus</dt>
  <dd>Minuman kopi yang dicampur susu, andalan warung kopi.</dd>
  <dt>Tubruk</dt>
  <dd>Diseduh dengan menuang air panas langsung ke bubuk.</dd>
  <dd>Tidak memerlukan alat seduh khusus.</dd>
</dl>

Pada contoh di atas, dua dt pertama adalah sinonim yang berbagi satu deskripsi, sedangkan dt ketiga mempunyai dua deskripsi yang saling melengkapi. Browser menampilkan semuanya menjorok di bawah istilah terkait.

Pembungkus div di Dalam dl #

Fakta menarik yang jarang diketahui: satu-satunya elemen lain yang boleh menjadi child langsung dl adalah div. Fungsinya membungkus satu grup dt-dd agar mudah ditata CSS — misalnya memberi latar berbeda pada tiap pasangan:

html 
<dl>
  <div>
    <dt>Espresso</dt>
    <dd>Seduhan pekat 30 ml, dasar banyak minuman kopi.</dd>
  </div>
  <div>
    <dt>Americano</dt>
    <dd>Espresso yang ditambah air panas.</dd>
  </div>
</dl>

Struktur ini sah menurut standar — pengecualian khusus yang tidak berlaku untuk elemen lain. div di sini tetap tidak menambah makna; ia hanya pengelompokan presentasi per pasangan.

Ringkasan #

  • dl memuat pasangan dt (istilah) dan dd (deskripsi), tanpa li dan tanpa pembungkus per pasangan.
  • Satu dt boleh berbagi beberapa dd, dan beberapa dt boleh berbagi satu dd.
  • div boleh membungkus grup dt-dd di dalam dl — pengecualian resmi untuk kebutuhan penataan.
  • dl untuk glosarium, FAQ, dan metadata — bukan untuk dialog.

Chapter berikutnya mengupas anggota yang sudah lama kita pakai tanpa dibedah: li, si butir daftar itu sendiri.