Belajar HTML Tag (dl) untuk Pemula

Waktu pertama kali belajar HTML, saya kira semua daftar itu bentuknya sama saja.

Kalau nggak pakai bullet, ya pakai angka.

Kalau nggak pakai angka, ya pakai bullet lagi.

Sederhana.

Ternyata setelah makin sering melihat kode HTML, saya menemukan ada satu jenis daftar yang cukup unik. Namanya List Definisi HTML atau tag dl.

Awalnya saya juga sempat bingung.

"Ini daftar, tapi kok nggak ada bullet?"

"Ini daftar, tapi kok bentuknya beda?"

Setelah dipahami, ternyata tag ini memang dibuat untuk kebutuhan yang berbeda.

Dan menurut saya, justru di situlah menariknya.

Saat Daftar Biasa Mulai Terasa Kurang Cocok

Bayangkan kamu sedang membuat halaman yang berisi istilah dan penjelasannya.

Misalnya:

• HTML → bahasa markup untuk membuat struktur halaman web
• CSS → digunakan untuk mengatur tampilan
• JavaScript → membuat halaman menjadi interaktif

Kalau ditulis menggunakan ul atau ol, sebenarnya bisa saja.

Tapi rasanya agak kurang pas.

Karena hubungan antara kata dan penjelasannya menjadi kurang terlihat.

Di sinilah saya mulai memahami kenapa HTML menyediakan tag dl.

Bukan karena pembuat HTML ingin menambah tag baru tanpa alasan.

Tetapi karena ada kebutuhan tertentu yang memang lebih cocok ditangani dengan struktur khusus.

Apa Itu Tag dl di HTML?

Kalau dijelaskan dengan bahasa sederhana, tag dl digunakan untuk membuat daftar istilah beserta keterangannya.

Di dalamnya biasanya terdapat dua tag lain:

• dt → istilah atau nama yang dijelaskan
• dd → deskripsi atau penjelasan dari istilah tersebut

Strukturnya kurang lebih seperti ini:

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

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

    <dt>JavaScript</dt>
    <dd>Membuat halaman web menjadi lebih interaktif.</dd>
</dl>

Saat kode tersebut ditampilkan di browser, hasilnya biasanya terlihat seperti daftar istilah dengan penjelasan yang berada di bawahnya.

Menurut saya, bentuk seperti ini jauh lebih nyaman dibaca dibanding memaksakan semuanya menjadi bullet list.

Mengenal Hubungan dl, dt, dan dd

Waktu pertama kali melihat ketiga tag ini, saya sempat tertukar.

Apalagi namanya mirip-mirip.

Supaya lebih gampang mengingatnya, saya biasanya membayangkannya seperti kamus mini.

Tag	Fungsi
dl	Wadah daftar definisi
dt	Istilah yang akan dijelaskan
dd	Penjelasan dari istilah tersebut

Misalnya:

<dl>
    <dt>Domain</dt>
    <dd>Alamat yang digunakan untuk mengakses website.</dd>

    <dt>Hosting</dt>
    <dd>Tempat menyimpan file website.</dd>
</dl>

Kalau dipikir-pikir, bentuknya memang mirip seperti kamus atau glosarium.

Dan memang itu salah satu penggunaan yang paling sering saya temui.

Satu Istilah Bisa Memiliki Beberapa Penjelasan

Hal yang baru saya sadari setelah belajar lebih jauh adalah satu tag dt ternyata bisa memiliki lebih dari satu dd.

Contohnya:

<dl>
    <dt>HTML</dt>

    <dd>HyperText Markup Language.</dd>

    <dd>Digunakan untuk membuat struktur halaman web.</dd>

    <dd>Menjadi fondasi dasar website.</dd>
</dl>

Browser tetap bisa menampilkan semuanya dengan baik.

Jadi kalau ada beberapa keterangan yang masih berkaitan dengan istilah yang sama, kita tidak perlu membuat dt baru.

Beberapa Istilah Bisa Mengarah ke Satu Penjelasan

Sebaliknya, beberapa istilah juga bisa berbagi satu deskripsi.

Contoh:

<dl>
    <dt>WWW</dt>
    <dt>World Wide Web</dt>

    <dd>Sistem informasi yang dapat diakses melalui internet.</dd>
</dl>

Waktu menemukan contoh seperti ini saya sempat heran.

Ternyata HTML memang cukup fleksibel.

Kapan Saya Biasanya Menggunakan Tag dl?

Jujur saja, saya tidak memakai tag ini setiap hari.

Sebagian besar proyek sederhana biasanya lebih sering menggunakan ul dan ol.

Tetapi ada beberapa kondisi di mana dl terasa jauh lebih cocok.

Misalnya:

• Glosarium istilah
• Kamus mini
• Halaman FAQ sederhana
• Daftar spesifikasi produk
• Daftar singkatan
• Informasi profil

Contoh spesifikasi produk:

<dl>
    <dt>RAM</dt>
    <dd>16 GB</dd>

    <dt>Penyimpanan</dt>
    <dd>512 GB SSD</dd>

    <dt>Prosesor</dt>
    <dd>Intel Core i7</dd>
</dl>

Menurut saya tampilannya jauh lebih rapi dibanding membuat semuanya dalam paragraf biasa.

Kesalahan yang Pernah Saya Lakukan

Ada satu kesalahan yang dulu pernah saya lakukan.

Saya menggunakan tag dl hanya karena ingin membuat tampilan berbeda.

Padahal isi datanya bukan istilah dan definisi.

Misalnya seperti ini:

<dl>
    <dt>Beranda</dt>
    <dt>Tentang</dt>
    <dt>Kontak</dt>
</dl>

Secara teknis mungkin tetap tampil.

Tetapi secara struktur HTML sebenarnya kurang tepat.

Tag dl sebaiknya digunakan ketika memang ada hubungan antara istilah dan penjelasan.

Kalau hanya membuat menu navigasi, lebih cocok menggunakan list biasa.

Membuat Tampilan dl Lebih Menarik dengan CSS

Secara bawaan, tampilan dl terlihat cukup sederhana.

Kalau ingin sedikit lebih rapi, kita bisa menambahkan CSS.

dt {
    font-weight: bold;
    margin-top: 12px;
}

dd {
    margin-left: 20px;
    color: #555;
}

Saya cukup sering melihat pola seperti ini.

Istilah dibuat lebih tebal, sementara penjelasannya sedikit menjorok ke dalam.

Hasilnya jadi lebih mudah dipindai saat dibaca.

Kadang perubahan kecil pada CSS sudah cukup membuat daftar definisi terlihat jauh lebih profesional.

Apakah Tag dl Penting Dipelajari?

Kalau kamu baru mulai belajar HTML, mungkin tag ini tidak akan langsung sering digunakan.

Saya sendiri juga begitu.

Bahkan cukup lama saya hanya fokus pada div, p, h1, ul, dan ol.

Tetapi semakin sering membuat halaman yang berisi data atau dokumentasi, saya mulai melihat manfaatnya.

Bukan karena tag ini keren.

Bukan juga karena wajib dipakai.

Tetapi karena HTML memang menyediakan struktur yang sesuai dengan kebutuhan tertentu.

Dan dl adalah salah satu contohnya.

FAQ

Apa perbedaan dl dan ul?

ul digunakan untuk daftar biasa yang memakai bullet, sedangkan dl digunakan untuk pasangan istilah dan penjelasan.

Apakah dl wajib berisi dt dan dd?

Ya. Umumnya tag dl digunakan bersama dt dan dd agar struktur daftar definisi menjadi benar.

Apakah tag dl masih digunakan di HTML5?

Masih. Tag ini tetap menjadi bagian dari standar HTML modern dan masih relevan digunakan sampai sekarang.

Apakah dl cocok untuk FAQ?

Dalam beberapa kasus, iya. Pertanyaan bisa ditempatkan pada dt, sedangkan jawabannya menggunakan dd.

Penutup

Lucunya, dulu saya menganggap tag dl hanyalah salah satu tag HTML yang jarang dipakai dan tidak terlalu penting.

Ternyata setelah memahami fungsinya, saya justru merasa tag ini cukup elegan.

Saat data yang kita miliki memang berupa istilah dan penjelasan, penggunaan dl, dt, dan dd terasa jauh lebih masuk akal dibanding memaksa semuanya menjadi bullet list biasa.

Kalau kamu sedang belajar HTML dan baru pertama kali melihat tag ini, santai saja. Saya juga sempat bingung ketika pertama kali menemukannya. Setelah mencoba beberapa kali, biasanya konsepnya langsung terasa lebih mudah dipahami.

Siapa tahu setelah ini kamu malah mulai sering menggunakannya di proyek HTML berikutnya.

Berbagi :