Halaman glosarium Budi menampung istilah web beserta penjelasannya: HTML adalah bahasa markup, browser adalah perangkat lunak pembuka halaman. Memasangkan setiap istilah dengan penjelasannya memang masih mungkin dilakukan dengan ul, tetapi hubungan “istilah berpasangan dengan deskripsi” akan hilang dari struktur. Untuk pola asosiasi semacam ini HTML menyediakan pasangan yang tepat: description list dengan tiga elemen dl, dt, dan dd. Pada Chapter ini kita membedah strukturnya, tiga pola pasangannya, serta kasus penggunaan yang paling sering muncul.

Struktur dl, dt, dan dd #

Elemen dl membungkus seluruh daftar. Setiap istilah (term) ditandai elemen dt, sedangkan penjelasannya (description) ditandai elemen dd. Satu grup terdiri atas satu atau beberapa dt diikuti satu atau beberapa dd. Bentuk paling dasar adalah pasangan tunggal:

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

Output yang Dihasilkan:

text 
Browser menampilkan:
  HTML
      Bahasa markup untuk menyusun struktur halaman web.

Pada tampilan bawaan browser, istilah dt tampil rata kiri dan penjelasan dd menjorok ke kanan. Tidak ada bullet maupun nomor yang dirender, karena konten jenis ini memang bukan deret item; pasangan istilah dan penjelasan itulah yang dibawa struktur.

Tiga Pola Pasangan #

Spesifikasi mengizinkan satu grup berisi satu atau beberapa dt serta satu atau beberapa dd. Dari aturan itu lahir tiga pola yang kita pakai bergantian:

  • 1:1: satu dt untuk satu dd, pola yang paling umum, misalnya satu istilah glosarium dengan satu penjelasan.
  • 1:N: satu dt untuk beberapa dd, cocok ketika satu istilah perlu beberapa penjelasan atau beberapa contoh.
  • N:1: beberapa dt untuk satu dd, tepat ketika dua istilah atau lebih berbagi penjelasan yang sama.

Kedua pola terakhir dituliskan seperti berikut:

html Pola 1:N dan N:1 pada dl 
<dt>Browser</dt>
<dd>Perangkat lunak pembuka halaman web.</dd>
<dd>Contohnya Firefox, Chrome, dan Safari.</dd>

<dt>HTTP</dt>
<dt>HTTPS</dt>
<dd>Protokol pertukaran data antara browser dan server.</dd>

Sintaksnya tidak memiliki trik apa pun: cukup tulis dd lebih dari satu untuk pola 1:N, atau dt lebih dari satu untuk pola N:1. Browser mengenali seluruh elemen dalam grup sebagai satu kesatuan.

Kapan Description List Dipakai #

Gunakan dl ketika konten terdiri atas pasangan istilah dan penjelasan, bukan deret item biasa. Kasus yang paling sering dijumpai:

  • Glosarium atau kamus istilah: setiap dt berupa istilah, setiap dd berupa definisinya.
  • Metadata produk: pasangan berulang seperti harga, stok, dan berat pada halaman toko.
  • FAQ singkat: pertanyaan menjadi dt, jawaban singkat menjadi dd.

Perbedaannya dengan ul dan ol terletak pada makna, bukan pada tampilan. ul menyusun item setara, ol menyusun urutan bermakna, sedangkan dl menyusun asosiasi antara istilah dan penjelasannya. Browser tidak memberi bullet ataupun nomor pada dl, dan screen reader membacanya dengan cara yang berbeda pula.

Contoh Lengkap: Glosarium Istilah Web #

File berikut merangkum ketiga pola pasangan dalam satu glosarium. Simpan sebagai glosarium-istilah-web.html, lalu buka dengan browser:

html glosarium-istilah-web.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Glosarium Istilah Web</title>
</head>
<body>
  <h1>Glosarium Istilah Web</h1>
  <dl>
    <dt>HTML</dt>
    <dd>Bahasa markup untuk menyusun struktur halaman web.</dd>

    <dt>Browser</dt>
    <dd>Perangkat lunak untuk membuka dan menampilkan halaman web.</dd>
    <dd>Contohnya Firefox, Chrome, dan Safari.</dd>

    <dt>HTTP</dt>
    <dt>HTTPS</dt>
    <dd>Protokol pertukaran data antara browser dan server web.</dd>
  </dl>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan tiga grup tanpa bullet atau nomor:
  HTML — diikuti satu penjelasan yang menjorok
  Browser — diikuti dua penjelasan yang menjorok
  HTTP dan HTTPS — berdampingan, diikuti satu penjelasan bersama

Uraian baris-per-baris bagian yang menentukan:

  1. Baris 9 (<h1>): judul halaman glosarium.
  2. Baris 10 (<dl>): wadah seluruh daftar; seluruh dt dan dd berada di dalamnya.
  3. Baris 11-12: grup pertama berpola 1:1, satu istilah HTML dengan satu penjelasan.
  4. Baris 14-16: grup kedua berpola 1:N, istilah Browser dengan dua dd: definisi lalu contoh.
  5. Baris 18-20: grup ketiga berpola N:1, dua dt (HTTP dan HTTPS) berbagi satu dd.
  6. Baris 21 (</dl>): penutup wadah daftar.

Dengan dl, kebutuhan menyusun pasangan istilah dan penjelasan selesai tertangani. Tingkat kerumitan berikutnya adalah list yang berada di dalam list: daftar isi kursus dengan bab dan subbab, topik Chapter Nested Lists.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

glosarium-istilah-web.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Glosarium Istilah Web</title>
</head>
<body>
  <h1>Glosarium Istilah Web</h1>
  <dl>
    <dt>HTML</dt>
    <dd>Bahasa markup untuk menyusun struktur halaman web.</dd>

    <dt>Browser</dt>
    <dd>Perangkat lunak untuk membuka dan menampilkan halaman web.</dd>
    <dd>Contohnya Firefox, Chrome, dan Safari.</dd>

    <dt>HTTP</dt>
    <dt>HTTPS</dt>
    <dd>Protokol pertukaran data antara browser dan server web.</dd>
  </dl>
</body>
</html>