Cara Membuat Deskripsi HTML

Di postingan sebelumnya, kita sudah membahas cara mengatur posisi gambar di HTML. Sekarang kita akan buat deskripsi HTML (description list). Simak langkah-langkahnya berikut yang AneIqbal sajikan.

Ohiya, deskripsi list ini berbeda ya dengan list yang pernah kita buat di postingan cara membuat list di HTML. Jadi, di HTML, ada 3 jenis list yang dapat kita buat. Ada ordered list, unordered list, dan description list.

Pengertian deskripsi HTML

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 membuatnya

Untuk membuat description list, kita menggunakan tag pembuka <dl> dan ditutup tag </dl>. Isi listnya ada di antara tag tersebut.

Judul/istilah listnya menggunakan tag pembuka <dt> dan ditutup dengan tag </dt>. Sedangkan deskripsi atau penjelasan dari istilah/judulnya menggunakan tag pembuka <dd> dan tag </dd> sebagai penutupnya.

Mari kita coba praktikkan.

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.

description list html
tampilan deskripsi HTML

Terlihat kan ada judul/istilah dan penjelasannya. Posisi di atas adalah itemnya dan posisi bawah merupakan penjelasan dari item tersebut.

Begitulah cara membuat description list di HTML. Nggak susah kan? Semoga panduan di atas bisa mudah dimengerti dan diikuti ya. Terima kasih juga sudah membaca panduan singkat di atas sampai akhir.

Selanjutnya, kita akan bahas cara membuat link internal di HTML.

Share yuk, ke:

Leave a Comment