HTML dt tag | belajar <dt> element

HTML dt tag | belajar <dt> element

Referensi Belajar HTML dt tag. Tutorial dan panduan mengenai element <dt>...</dt> yang digunakan untuk memarkup sebuah istilah (Term). Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <dt>.


Deskripsi
Penjelasan HTML dt

HTML <dt> element menunjukkan sebuah Definition Term yang digunakan untuk merepresentasikan sebuah istilah pada daftar definisi (Definition list (<dl>)).

<dt> ditulis didalam element <dl> dan biasanya terletak sebelum <dd> element, sehingga <dt> dan <dd> merupakan anak element dari <dl>.

Dalam penggunaannya, element <dt> tidak selalu menunjukkan istilah yang memiliki definisi. Untuk memarkup konten yang memiliki definisi dengan jelas, maka tambahkan element <dfn> di dalam <dt> tersebut.


Global Attributes
Atribut Secara Global (Keseluruhan)

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

Event Attributes
Atribut event (Peristiwa)

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

Example
Contoh HTML <dt> element

Contoh 1
HTML
<dl>
<dt>Ambiguitas</dt>
<dd>Sifat atau hal yg bermakna dua; kemungkinan yg mempunyai dua pengertian</dd>
<dt>Provokasi</dt>
<dd>Perbuatan untuk membangkitkan kemarahan; tindakan menghasut; penghasutan; pancingan</dd>
</dl>

Contoh 2

Contoh HTML <dt> dengan tambahan <dfn> element

HTML
<dl>
<dt><dfn>freedom</dfn></dt>
<dd class="cara-pengucapan">/'fred?m/</dd>
<dd class="jenis-kata"><i><abbr>kb.</abbr></i></dd>
<dd>kemerdekaan, kebebasan.</dd>
<dd><q><b>freedom</b> of action</q> kebebasan untuk bertindak.</dd>
</dl>

Contoh diatas digunakan untuk mendefinisikan sebuah istilah atau kosa kata dengan deskripsi (<dd>) lebih dari satu.


Contoh 3

Contoh HTML <dt> element pada sebuah teks tanya-jawab (F.A.Q)

HTML
<h1>Tanya Jawab</h1>
<dl>
<dt>Apa kepanjangan dari HTML?</dt>
<dd>HyperText Markup Language.</dd>
<dt>Apa Kepanjangan dari CSS?</dt>
<dd>Cascading Style Sheets.</dd>
<dt>Apa itu JavaScript?</dt>
<dd>Bahasa pemrograman web pada sisi client.</dd>
</dl>

Contoh Lengkap

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

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

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

    <dl>
      <dt>Ambiguitas</dt>
      <dd>Sifat atau hal yg bermakna dua; kemungkinan yg mempunyai dua pengertian</dd>
      <dt>Provokasi</dt>
      <dd>Perbuatan untuk membangkitkan kemarahan; tindakan menghasut; penghasutan; pancingan</dd>
    </dl>

    <hr />
    <h3>Contoh 2</h3>

    <dl>
     <dt><dfn>freedom</dfn></dt>
     <dd class="cara-pengucapan">/'fred?m/</dd>
     <dd class="jenis-kata"><i><abbr>kb.</abbr></i></dd>
     <dd>kemerdekaan, kebebasan.</dd>
     <dd><q><b>freedom</b> of action</q> kebebasan untuk bertindak.</dd>
    </dl>

    <hr />
    <h3>Contoh 3</h3>

    <h1>Tanya Jawab</h1>
    <dl>
      <dt>Apa kepanjangan dari HTML?</dt>
      <dd>HyperText Markup Language.</dd>
      <dt>Apa Kepanjangan dari CSS?</dt>
      <dd>Cascading Style Sheets.</dd>
      <dt>Apa itu JavaScript?</dt>
      <dd>Bahasa pemrograman web pada sisi client.</dd>
    </dl>

  </body>
</html>
SHARE