Penggunaan Definition Lists: DL, DT, DD

Friday, May 25, 2012

Penggunaan Definition Lists: DL, DT, DD

1:45:00 PM | Diposkan oleh Unknown | | Edit Post

Definition lists adalah daftar yang mengandung unsur istilah dan definisinya. Dalam definition list digunakan tag HTML <dl>...</dl> . Format tampilan dalam definition list antara istilah dan definisi dibedakan dengan posisi teks, dimana istilah berada di sebelah kiri dan definisi ada di bawah istilah menjorok lebih ke kanan.

Definition List <dl> berisi tag <dt>...</dt> dan <dd>...</dd>. Tag tersebut digunakan untuk menempatkan istilah dengan definisinya. Istilah diapit oleh tag <dt>...</dt>, sedangkan definisi dari istilah diapit oleh tag <dd>...</dd>.

Format penulisan definition list

<dl>
<dt>Istilah 1</dt>
<dd>Definisi dari istilah 1</dd>
<dt>Istilah 2</dt>
<dd>Definisi dari istilah 2</dd>
<dt>Istilah 3</dt>
<dd>Definisi dari istilah 3</dd>
</dl>

Tampilan definition lists dari tag HTML di atas adalah sebagai berikut.

Istilah 1: Definisi dari istilah 1
Istilah 2: Definisi dari istilah 2
Istilah 3: Definisi dari istilah 3

Definition list dapat juga digunakan untuk membuat daftar/list bullet seperti pada unordered list dengan memasukkan unsur gambar. Hanya saja format penulisannya berbeda. Langsung lihat saja ya tag HTMLnya seperti di bawah ini. Sebagai catatan untuk teks warna merah bisa anda ganti dengan alamat url image yang akan anda pakai sebagai bullet.

<dl>
<dt><img height="15" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvt5uR1Ffhmyn6krl1TFNV0tbIzIy0Mz8SMcwIqoXy-z20sqV1TSPof73prPZw_rC9qOe1hOgcgg1_qnPNnlKElIfKjX1PClhO3me0Q8LUdJ0aCClco34CRALyMQvdfZVUAxoMyzhKzHKj/s1600/TomatoBullet.gif" width="15" />Daftar list 1</dt>
<dd>Isi daftar list 1</dd>
<dd>Isi daftar list 1</dd>
<dd>Isi daftar list 1</dd>
<dt><img height="15" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvt5uR1Ffhmyn6krl1TFNV0tbIzIy0Mz8SMcwIqoXy-z20sqV1TSPof73prPZw_rC9qOe1hOgcgg1_qnPNnlKElIfKjX1PClhO3me0Q8LUdJ0aCClco34CRALyMQvdfZVUAxoMyzhKzHKj/s1600/TomatoBullet.gif" width="15" />Daftar list 2</dt>
<dd>Isi daftar list 2</dd>
<dd>Isi daftar list 2</dd>
<dd>Isi daftar list 2;/dd>
</dl>

Maka hasil tampilannya adalah seperti ini.

Daftar list 1: Isi daftar list 1; Isi daftar list 1; Isi daftar list 1
Daftar list 2: Isi daftar list 2; Isi daftar list 2; Isi daftar list 2