HTML dt tag | belajar <dt> element

HTML Fadlullah Fadul December 3, 2018

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.

Silahkan, lihat referensi mengenai HTML Global Attribute

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.

Silahkan, lihat referensi mengenai HTML Events Attribute

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
editor 
<!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
Previous Article Next Article