Tutorial HTML Lanjutan: Cara Membuat Description List di HTML
Halo gan. Di postingan sebelumnya, kita sudah membahas cara mengatur tampilan gambar di HTML.
Gambar dapat kita atur posisinya dengan atribut align. Selain diatur posisinya, gambar dapat kita tambahkan garis tepi dengan ketebalan tertentu dalam satuan pixel.
Kali ini, kita akan bahas cara membuat description list di HTML. Ohiya, sebelumnya, kita juga sudah pernah membahas ordered list dan undordered list di postingan ini: Tutorial HTML untuk Pemula: Membuat Daftar/List di HTML.
Jadi, di HTML, ada 3 jenis list yang dapat kita buat. Ada ordered list, unordered list, dan description list.
Gambar dapat kita atur posisinya dengan atribut align. Selain diatur posisinya, gambar dapat kita tambahkan garis tepi dengan ketebalan tertentu dalam satuan pixel.
Kali ini, kita akan bahas cara membuat description list di HTML. Ohiya, sebelumnya, kita juga sudah pernah membahas ordered list dan undordered list di postingan ini: Tutorial HTML untuk Pemula: Membuat Daftar/List di HTML.
Jadi, di HTML, ada 3 jenis list yang dapat kita buat. Ada ordered list, unordered list, dan description list.
Pengertian description list
Description list adalah jenis list yang digunakan untuk membuat daftar/list yang berupa judul/istilah beserta penjelasannya.
Ada judul/istilah, ada deskripsinya.
List ini memang tidak sepopuler ordered list ataupun undordered list. Tapi cukup membantu juga untuk membuat list yang berisi istilah-istilah beserta penjelasannya.
Cara membuat description list
Untuk membuat description list, kita menggunakan tag pembuka <dl> dan tag penutup </dl>. Isi listnya ada di antara tag tersebut.
Judul/istilah listnya menggunakan tag pembuka <dt> dan tag penutup </dt>. Sedangkan deskripsi atau penjelasan dari istilah/judulnya menggunakan tag pembuka <dd> dan tag penutup </dd>.
Mari kita coba praktikkan.
Barangkali Anda tertarik baca:
Tutorial HTML Lanjutan: Cara Membuat Internal Link di HTML
Tutorial HTML Lanjutan: Perbedaan Block Element dan Inline Element
Tutorial Formating Text HTML: Cara Membuat Huruf Miring di HTML
Barangkali Anda tertarik baca:
Tutorial HTML Lanjutan: Cara Membuat Internal Link di HTML
Tutorial HTML Lanjutan: Perbedaan Block Element dan Inline Element
Tutorial Formating Text HTML: Cara Membuat Huruf Miring di HTML
Buat sebuah file lalu simpan dengan nama list-deskripsi.html. Berikut kodenya.
<!DOCTPYE HTML> <html> <head> <title>Membuat description list di HTML</title> </head> <body> <dl> <dt>Sepeda</dt> <dd>adalah kendaraan beroda dua dengan tenaga manusia sebagai motornya</dd> <dt>Motor</dt> <dd>adalah kendaraan beroda dua dengan mesin sebagai motornya</dd> <dt>Mobil</dt> <dd>adalah kendaraan beroda empat dengan mesin sebagai motornya</dd> </dl> </body> </html>
Kalau kita jalankan file tersebut, seperti ini jadinya.
Terlihat kan ada judul/istilah dan penjelasannya.
Begitulah cara membuat description list di HTML.
Nggak susah kan?
Selanjutnya, kita akan bahas cara membuat internal link di HTML.