Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Koding

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.

tutorial html lanjutan

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

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.

tutorial html lanjutan

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.

Posting Komentar untuk "Cara Membuat Description List di HTML"

Silakan berkomentar dengan kalimat yang bijak.