Materi Dasar HTML #5 : Pengertian dan Cara Membuat Description List

 Dalam pembuatan tag Ordered list dan Unordered list, HTML masih mempunyai jenis tag list lainnya, yaitu tag description list. 

Pengertian Description List dalam HTML

Description List merupakan list yang digunakan untuk membuat list yang berisi deskripsi/penjelasan /istilah dari list tersebut.

Description list memang tidak banyak digunakan seperti Oredered list dan Unordered list. Tetapi jika kita memang sangat membutuhkannya untuk membuat list dengan deskripsi, kita bisa menggunakan list jenis ini.

Cara Membuat Description List HTML

Tag Description List

Untuk membuat description list kita membutuhkan tiga tag berikut:

<dl> singkatan dari Description List, yang digunakan untuk memulai seluruh tag list yang berada didalam tag <dl> yang menghubungkan tag <dt> dan <dd>.

<dt> singkatan dari Description Term, yang digunakan untuk membuat judul deskripsi yang akan digunakan.

<dd>  singkatan dari Description Description, yang digunakan untuk membuat penjelasan dari kata.

Berikut format penulisannya :

<dl> 
    <dt> Judul pertama </dt>
    <dd> Deskripsi/keterangan dari judul pertama </dd> 
    <dt> Judul kedua </dt>
    <dd> Deskripsi/keterangan dari judul kedua </dd> 
</dl>

Berikut Contoh kode program Description List HTML : 

See the Pen Description List by MiftaSetiaji (@MiftaSetiaji) on CodePen.

 

Setelah kode html ditampilkan, isi deskripsi/penjelasan tag <dd> akan tampil sedikit  ke dalam (indent) dari istilah tag <dt>.