HTML details tag | belajar <details> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML details tag. Tutorial dan panduan mengenai element <details>...</details> yang digunakan untuk menampilkan dan menyembunyikan rincian konten lebih lengkap. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <details>.

Deskripsi
Penjelasan HTML details

HTML <details> merupakan element interaktif yang digunakan untuk menentukkan rincian (detail) konten tambahan yang dapat ditampilkan atau disembunyikan oleh user.

Secara default, teks atau konten pada details element tidak akan ditampilkan pada jendela browser kecuali attribute open disebutkan pada details element tersebut.

Dalam penggunaannya, <details> ditulis bersamaan dengan <summary> element didalamnya yang digunakan sebagai judul atau teks yang akan ditampilkan, sehingga teks atau konten pada element summary tersebut apabila diklik akan muncul konten dari <details> element sebagai rincian atau penjabaran yang memberi keterangan lebih lengkap.

TIPS

<details> element tidak tepat digunakan pada sebuah catatan kaki (footnotes).

Attributes
Atribut HTML Tag <details>

open

Menentukkan bahwa konten dari details element akan terbuka (open) secara langsung ketika halaman selesai dimuat, sehingga judul dan rincian (keterangan) yang ditulis akan dapat dilihat / dibaca oleh user.

Value: open

Global Attributes
Atribut Secara Global (Keseluruhan)

<details> 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)

<details> 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 <details> element

HTML 
<details>
  <summary>Judul Informasi (Klik Aku)</summary>
  <p>Keterangan dari informasi secara lengkap dapat ditulis disini.</p>
</details>

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 details tag</title>
    <style>

    </style>
  </head>
  <body>
    <details>
      <summary>Judul Informasi (Klik Aku)</summary>
      <p>Keterangan dari informasi secara lengkap dapat ditulis disini.</p>
    </details>
  </body>
</html>
SHARE
Previous Article Next Article