HTML dl tag | belajar <dl> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML dl tag. Tutorial dan panduan mengenai element <dl>...</dl> untuk memberi markup istilah dan deskripsi dalam sebuah group. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <dl>.

Deskripsi
Penjelasan HTML dl

HTML <dl> tag menunjukkan sebuah Description List atau daftar penjelasan.

<dl> element digunakan untuk mereferensikan daftar istilah berikut penjelasannya. Contohnya, sebuah metadata, daftar kata-kata (Glossary) dan kamus yang semuanya dalam group berpasangan, yakni menyebutkan istilah/kata dan penjelasannya.

Dalam penggunaannya, <dl> digunakan bersamaan dengan <dt> (Menunjukkan istilah/term) dan <dd> (Penjelasan dari istilah tersebut).

<dl> element tidak cocok digunakan untuk memberi markup sebuah dialog atau percakapan juga tidak tepat digunakan hanya untuk memberi indentasi (menjorok) pada sebuah teks atau paragraf.

Global Attributes
Atribut Secara Global (Keseluruhan)

<dl> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<dl> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <dl> element

Contoh 1
HTML 
<dl>
  <dt>Zenit</dt>
  <dd>Titik khayal di langit yg tegak lurus di atas bumi thd cakrawala; titik puncak</dd>
  <dt>Bonanza</dt>
  <dd>Sumber keuntungan; sumber kebahagiaan dan kemakmuran</dd>
</dl>
Contoh 2

Contoh HTML <dl> element dengan penjelasan (<dd>) lebih dari satu.

HTML 
<dl>
  <dt><dfn>amnesty</dfn></dt>
  <dd class="cara-pengucapan">/'amnəstē/</dd>
  <dd class="jenis-kata"><i><abbr>kb.</abbr></i></dd>
  <dd>pengampunan</dd>
  <dd>penghapusan hukuman yg diberikan kepala negara kpd seseorang atau sekelompok orang yg telah melakukan tindak pidana tertentu</dd>
</dl>

Contoh diatas memberikan penjelasan kosa kata seperti pada kamus dengan memberikan nama class yang relevan pada <dd> element

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML dl tag</title>
    <style>

    </style>
  </head>
  <body>
    <h2> Contoh 1 </h2>

    <dl>
      <dt>Zenit</dt>
      <dd>Titik khayal di langit yg tegak lurus di atas bumi thd cakrawala; titik puncak</dd>
      <dt>Bonanza</dt>
      <dd>Sumber keuntungan; sumber kebahagiaan dan kemakmuran</dd>
    </dl>

    <hr />
    <h2> Contoh 2 </h2>

    <dl>
      <dt><dfn>amnesty</dfn></dt>
      <dd class="cara-pengucapan">/'amnəstē/</dd>
      <dd class="jenis-kata"><i><abbr>kb.</abbr></i></dd>
      <dd>pengampunan</dd>
      <dd>penghapusan hukuman yg diberikan kepala negara kpd seseorang atau sekelompok orang yg telah melakukan tindak pidana tertentu</dd>
    </dl>

  </body>
</html>
SHARE
Previous Article Next Article