Description List `<dl>`: Membuat List Definisi di HTML

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah membahas unordered list <ul>, kita tutup seri list dengan description list <dl>. List khusus untuk pasangan istilah dan definisi.

Apa itu Description List?

Description list adalah list yang menampilkan pasangan istilah dan deskripsinya. HTML punya tiga tag untuk ini: <dl>, <dt>, dan <dd>.

Description list cocok untuk:

• Daftar definisi
• Glossary atau kamus
• FAQ (Frequently Asked Questions)
• Pasangan label dan nilai

Struktur Dasar Description List

Tiga tag membentuk description list:

• <dl> — Description list container
• <dt> — Definition term (istilah)
• <dd> — Definition description (deskripsi)

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

  <dt>CSS</dt>
  <dd>Bahasa untuk mengatur tampilan halaman web.</dd>

  <dt>JavaScript</dt>
  <dd>Bahasa pemrograman untuk interaktivitas halaman web.</dd>
</dl>

Output:

HTML

Bahasa markup untuk membuat struktur halaman web.

CSS

Bahasa untuk mengatur tampilan halaman web.

JavaScript

Bahasa pemrograman untuk interaktivitas halaman web.

Satu Istilah, Banyak Deskripsi

Kamu bisa punya beberapa <dd> untuk satu <dt>:

<dl>
  <dt>Browser</dt>
  <dd>Perangkat lunak untuk membuka halaman web.</dd>
  <dd>Contoh: Chrome, Firefox, Safari, Edge.</dd>
</dl>

Output:

Browser

Perangkat lunak untuk membuka halaman web.

Contoh: Chrome, Firefox, Safari, Edge.

Banyak Istilah, Satu Deskripsi

Kamu juga bisa punya beberapa <dt> sebelum satu <dd>:

<dl>
  <dt>HTML</dt>
  <dt>XHTML</dt>
  <dd>Markup language yang digunakan untuk membuat halaman web.</dd>
</dl>

Output:

HTML

XHTML

Markup language yang digunakan untuk membuat halaman web.

Nested Description List

Description list bisa bersarang, meski jarang digunakan:

<dl>
  <dt>Frontend</dt>
  <dd>
    Bagian website yang berinteraksi langsung dengan pengguna.
    <dl>
      <dt>HTML</dt>
      <dd>Struktur konten</dd>
      <dt>CSS</dt>
      <dd>Tampilan visual</dd>
    </dl>
  </dd>
</dl>

Contoh Penggunaan Praktis

Glossary Teknis

<h2>Glossary Web Development</h2>
<dl>
  <dt>API</dt>
  <dd>Application Programming Interface. Antarmuka untuk berkomunikasi antar aplikasi.</dd>

  <dt>DOM</dt>
  <dd>Document Object Model. Representasi struktur dokumen HTML.</dd>

  <dt>SEO</dt>
  <dd>Search Engine Optimization. Teknik untuk meningkatkan visibilitas di mesin pencari.</dd>

  <dt>Responsive</dt>
  <dd>Desain yang menyesuaikan ukuran layar perangkat.</dd>
</dl>

FAQ

<h2>Pertanyaan Umum</h2>
<dl>
  <dt>Apakah HTML sulit dipelajari?</dt>
  <dd>Tidak. HTML adalah bahasa markup paling dasar dan cocok untuk pemula.</dd>

  <dt>Bagaimana cara belajar HTML?</dt>
  <dd>Mulai dari tag-tag dasar seperti &lt;h1&gt;, &lt;p&gt;, dan &lt;a&gt;. Praktik langsung dengan membuat halaman sederhana.</dd>

  <dt>Berapa lama belajar HTML?</dt>
  <dd>Dasar HTML bisa dipelajari dalam 1-2 minggu. Pemahaman lanjutan butuh waktu lebih lama dengan praktik terus-menerus.</dd>
</dl>

Data Pribadi

<h2>Profil Saya</h2>
<dl>
  <dt>Nama</dt>
  <dd>Muhammad Hanif</dd>

  <dt>Lokasi</dt>
  <dd>Indonesia</dd>

  <dt>Pekerjaan</dt>
  <dd>Web Developer</dd>

  <dt>Hobi</dt>
  <dd>Menulis tutorial, coding, membaca buku</dd>
</dl>

Description List vs Unordered List

Pilih <dl> kalau ada pasangan label dan nilai. Pilih <ul> kalau hanya ada item saja.

Best Practice Description List

• Gunakan <dl> untuk data yang berpasangan (label-nilai)
• Gunakan <dt> untuk istilah atau label
• Gunakan <dd> untuk deskripsi atau nilai
• Hindari nested terlalu dalam agar tetap mudah dibaca
• Bisa dikombinasikan dengan CSS untuk tampilan yang lebih menarik

Ringkasan

• <dl> adalah container description list
• <dt> untuk istilah atau label
• <dd> untuk deskripsi atau nilai
• Satu <dt> bisa punya beberapa <dd>
• Bisa nested, meski jarang digunakan
• Cocok untuk glossary, FAQ, dan data berpasangan

Penutup

Kamu sudah memahami tiga jenis list di HTML: ordered list, unordered list, dan description list. Ketiganya punya kegunaan masing-masing. Gunakan yang paling sesuai dengan jenis data yang kamu tampilkan.

Di modul selanjutnya, kita akan belajar membuat tabel di HTML.