Cara Membuat Description List di HTML dengan Tag dl, dt dan dd

Kuy Belajar - Cara Membuat Description List di HTML dengan Tag dl, dt dan dd.

Assalamualaikum sobat semua, kita ketemu lagi nih. Setelah sebelumnya kita telah membahas materi tentang Cara Mengatur Gambar Dengan Tag Align dan Border. Kali ini kita akan membahas materi tentang Cara Membuat Description List di HTML dengan Tag dl, dt dan dd. Kuy simak pembahasan di bawah ini!

Mengenal Description List dalam HTML

Description List yaitu jenis sebuah list/daftar yang ditujukan untuk membuat struktur yang berisi deskripsi atau daftar penjelasan.

Jenis list ini mungkin tidak sepopuler ordered list atau unordered list, namun jika sobat membutuhkan struktur HTML untuk membuat list yang berisi penjelasan istilah-istilah dengan keterangannya, mungkin menggunakan list jenis ini adalah pilihan yang sangat tepat.

Penggunaan Description List dalam 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>.

Berikut ini adalah contoh penulisan Description List dalam HTML.


<html>



<title>Kuy Belajar Description List</title>


</head>

<body>

<h3>Kita sedang belajar HTML bersama-sama</h3>






<dl>





<dt>HTML</dt>

<dd>HTML adalah singkatan dari Hypertext Markup Language.</dd>

<dt>CSS</dt>

<dd>CSS adalah singkatan dari Cascading Style Sheet.</dd>

<dt>PHP</dt>

<dd>PHP adalah singkatan dari PHP: Hypertext Preprocessor.</dd>

</dl>

</body>





</html>

Ketika sobat menjalankan kode HTML di atas, maka akan seperti berikut ini hasilnya.

Perhatikan cara penulisan description list diatas, untuk setiap tag <dt>, diikuti oleh tag <dd>. Namun kita bisa juga menambahkan beberapa tag <dd> pada satu tag <dt>, dan demikian juga sebaliknya.

Di dalam web browser, isi dari penjelasan pada tag <dd> akan ditampilkan dengan sedikit menjorok (indent) dari bagian istilahnya.

Untuk memudahkan mengingat, tag <dt> bisa disebut sebagai ‘data term’, dan tag <dd> sebagai ‘data description’.

Saya rasa itu lah pembahasan kita tentang Cara Membuat Description List di HTML dengan Tag dl, dt dan dd. kita sudah mempelajari fungsi berserta contoh nya masing-masing.

Sekian dulu dari saya "Singkat, Semoga Bermanfaat"

Keep Coding ya sobat!

Kuy ke materi terakhir : Membuat Aplikasi Buku Telepon Sederhana Menggunakan HTML