-->

Home Koding Cara Membuat Description List di HTML

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

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

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.

Semua Tutorial HTML

Comment Policy: Silakan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Buka Komentar

Tutup Komentar