Cara menggunakan dt html

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.

Table of Contents Show

Bagaimana cara membuat description list di HTML?
Apa itu DD pada HTML?
Apa itu dt di HTML?
Apa yang dimaksud dengan description list?
Apa itu dt dalam HTML?
Apa perbedaan tag dl dan DT?
Apa itu dl HTML?
Bagaimana cara membuat description list di HTML?

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> :

<!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>
   <h2>Latihan Menggunakan HTML Element DL</h2>
   <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 :

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;
}

27 Jul 2022

Bagaimana cara membuat description list di HTML?

Untuk membuat Description List, seluruh list harus berada di dalam pasangan tag <dl> dan </dl>. Untuk setiap deskripsi atau judul istilah, kita menggunakan tag <dt>. Sedangkan untuk penjelasan istilah tersebut, kita menggunakan tag <dd>.

Apa itu DD pada HTML?

dd menunjukkan sebuah Definition Description atau penjelasan dari sebuah istilah/term. HTML <dd> tag merupakan element yang memberikan penjelasan sebuah istilah/term (Yang ditulis didalam element <dt> (definition term)).

Apa itu dt di HTML?

Deskripsi. Penjelasan HTML dt HTML <dt> element menunjukkan sebuah Definition Term yang digunakan untuk merepresentasikan sebuah istilah pada daftar definisi (Definition list ( <dl> )).

Apa yang dimaksud dengan description list?

Description List adalah list yang berisi deskripsi atau penjelasan dari sesuatu.

Apa itu dt dalam HTML?

Deskripsi. Penjelasan HTML dt HTML <dt> element menunjukkan sebuah Definition Term yang digunakan untuk merepresentasikan sebuah istilah pada daftar definisi (Definition list ( <dl> )).

Apa perbedaan tag dl dan DT?

<dl> (description list) tag untuk memulai description list; <dt> (description term) tag untuk membuat kata yang akan dideskripsikan; <dd> (description description) tag untuk membuat penjelasan dari kata.