HTML element DL (Description List) merupakan jenis list yang ditujukan untuk membuat struktur yang berisi deskripsi list atau daftar penjelasan. Pada HTML 4.01 ke bawah jenis list ini sering disebut sebagai Definition List. Description List berguna untuk membuat daftar lebih terstruktur dengan baik sesuai dengan kaidah XHTML.
Di dalam Description List <dl> terdapat dua buah elemen list yang saling berpasangan. List tersebut adalah <dt> (data therm/data title) dan <dd> (data description). HTML elemen dalam tag <dt> merupakan judul daftar sedangkan elemen yang berada di dalam tag <dd> adalah penjelasan (deskripsi) dari isi konten datanya.
Berikut ini contoh penggunaan HTML element <DL> :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan HTML Element DL (Description List)</title>
<style>
p{
background:#D2B48C;
padding:5px;
}
.dl_pertama, .dl_kedua{
background: #CD853F;
padding: 5px;
}
</style>
</head>
<body>
<h1>Latihan Menggunakan HTML Element DL</h1>
<dl class="dl_pertama">
<dt><b>HTML</b></dt>
<dd>HTML singkatan dari Hyper Text Markup Language.</dd>
<dt><b>HTTP</b></dt>
<dd>HTTP singkatan dari Hyper Text Transfer Protocol.</dd>
<dt><b>SMTP</b></dt>
<dd>SMTP singkatan dari Simple Transfer Protocol.</dd>
<dt><b>PHP</b></dt>
<dd>PHP singkatan dari PHP Hypertext Preprocessor.</dd>
</dl>
<p>Contoh Description List dengan dd lebih dari satu</p>
<dl class="dl_kedua">
<dt><b>Cakrawala</b></dt>
<dd>Kaki langit</dd>
<dd>Batas pemandangan; horizon;</dd>
<dt><b>Negara</b></dt>
<dd>Organisasi dalam suatu wilayah yang mempunyai kekuasaan tertinggi yang sah dan ditaati oleh rakyat.</dd>
<dd>Kelompok sosial yang menduduki wilayah atau daerah tertentu yang diorganisasi di bawah lembaga politik dan pemerintah yang efektif, mempunyai kesatuan politik, berdaulat sehingga berhak menentukan tujuan nasionalnya.</dd>
<dt><b>Satelit</b></dt>
<dd>Alat yang diluncurkan mengedari planet.</dd>
<dd>Bintang siarah yang mengedari bintang siarah yang lebih besar.</dd>
</dl>
</body>
</html>
Jika dijalankan pada browser maka hasilnya sebagai berikut :
Konsep Description List <DL> :
HTML element <dl> description list cukup sulit untuk memahami kegunaan dan manfaat dari jenis list tersebut. Namun pada keperluan tertentu, jenis list ini masih dibutuhkan.
Agar mudah untuk memahaminya, jenis list ini selalu memiliki isi konten yang saling berpasangan yaitu <dt> (data title) dan <dd> (data description). Konsepnya hampir sama dengan ordered list <ol>. Jika pada ordered list <ol>, daftar disajikan dengan nomor urut dengan diikuti konten daftarnya. Namun jika pada description list <dl>, daftar disajikan dengan <dt> (data title) sebagai pengganti nomor urut kemudian diikuti isi konten daftarnya dalam bentuk <dd> (data description).
Penyajian daftar dalam description list <dl> pada umumnya jarang digunakan. Namun untuk hal-hal tertentu seperti untuk program pemroses non-HTML merupakan alternatif lain yang dapat dipertimbangkan.
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <dl> | ya | ya | ya | ya | ya |
Global Attributes :
Tag <dl> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <dl> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <dl> pada HTML:
CSS
1
2
3
4
5
6
7
Previous Pagedl{
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
