Some text some message..
Some text some message..
Some text some message..
Some text some message..

DL (Description List) Pada HTML

previous Previous Page

Description list adalah adalah jenis list yang ditujukan untuk membuat struktur yang berisi deskripsi atau daftar penjelasan. Pada HTML 4.01 ke bawah jenis list ini sering disebut sebagai definition list. Description list 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). Elemen dalam tag <dt> merupakan judul daftar sedangkan elemen yang berada di dalam tag <dd> adalah penjelasan (deskripsi) dari konten datanya.

Berikut ini contoh penggunaan <dl> (description list) :

HTML

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <title>Description List</title>
5.     <style>
6.     p{
7.     background:#D2B48C;
8.     padding:5px;
9.     }
10.    .dl_pertama, .dl_kedua{
11.    background: #CD853F;
12.    padding: 5px;
13.    }
14.    </style>
15. </head>
16. <body>
17.    <p>Latihan Membuat List Description</p>
18.    <dl class="dl_pertama">
19.     <dt><b>HTML</b></dt>
20.     <dd>HTML singkatan dari Hyper Text Markup Language.</dd>
21.    
22.     <dt><b>HTTP</b></dt>
23.     <dd>HTTP singkatan dari Hyper Text Transfer Protocol.</dd>
24.    
25.     <dt><b>SMTP</b></dt>
26.     <dd>SMTP singkatan dari Simple Transfer Protocol.</dd>
27.    
28.     <dt><b>PHP</b></dt>
29.     <dd>PHP singkatan dari PHP Hypertext Preprocessor.</dd>
30.    </dl>
31.    
32.    <p>Contoh Description List dengan dd lebih dari satu</p>
33.    <dl class="dl_kedua">
34.     <dt><b>Cakrawala</b></dt>
35.     <dd>Kaki langit</dd>
36.     <dd>Batas pemandangan; horizon;</dd>
37.    
38.     <dt><b>Negara</b></dt>
39.     <dd>Organisasi dalam suatu wilayah yang mempunyai kekuasaan tertinggi yang sah dan ditaati oleh rakyat.</dd>
40.     <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>
41.    
42.     <dt><b>Satelit</b></dt>
43.     <dd>Alat yang diluncurkan mengedari planet.</dd>
44.     <dd>Bintang siarah yang mengedari bintang siarah yang lebih besar.</dd>
45.    
46.    </dl>
47. </body>
48. </html>

Jika dijalankan pada browser maka hasilnya sebagai berikut :

description list html

Konsep description list <dl> :

Element <dl> description list kadang sulit untuk dipahami untuk apa dan manfaat diciptakan list tersebut. Namun untuk keperluan tertentu list ini masih dibutuhkan.

Untuk memahaminya, list ini selalu memiliki 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 lalu dibelakang nomor urut tersebut berisi konten daftarnya. Namun jika pada description list <dl>, daftar disajikan dengan <dt> (data title) sebagai pengganti nomor urut lalu dibelakangnya baru berisi berisi 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 adalah alternatif yang dapat dipertimbangkan.

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<dl>yayayayaya

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:

dl{
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML