HTML details Tag

HTML detail Tag - belajar html details, element details mempunyai definisi sebagai rincian tambahan yang bersifat pengguna dapat melihat atau menyembunyikan element atau kontent yang ada didalamnya.

Dalam penggunaan element details harus diikut sertakan element <summary> yang berfungsi sebagai title atau judul dari element details.

Element <details> didalam pembacaan browser, dengan setting default element ini akan tidak terlihat, terkecuali attribute open ditulis pada element <details>

Contoh 1 html element <details> :

<details>
 <summary>Judul Infomasi</summary>
 isi Konten
</details>

Contoh 2 html element <details> :

<details>
 <summary>Iklan Baris</summary>
 <ul>
  <li>Mobile Rental</li>
  <li>Handphone Murah</li>
  <li>Grosir Baju Murah</li>
 </ul>
</details>

Contoh 3 html element <details> :

<details>
 <summary>Agen Kami</summary>
  <p>Anita : <i>hp</i> <u>+620000000000</u></p>
  <p>merrie : <i>hp</i> <u>+620000000000</u></p>
  <p>Nanda : <i>hp</i> <u>+620000000000</u></p>
</details>

Atribut :

Attribute	Value	head
open	open	Menentukan apakah konten atau element html yang ada didalam tag <details> secara default akan terlihat. Attribute ini bersifat boolean, artinya nilai dari attribute ini bisa ditulis maupun tidak Misal : <details open>...</details> <details open="open">...</details> Contoh nomor 1 dan nomor 2 bersifat sama.

Contoh :

<details open="open">
<summary>Iklan Baris</summary>
<ul>
 <li>Mobile Rental</li>
 <li>Handphone Murah</li>
 <li>Grosir Baju Murah</li>
</ul>
</details>

Global Attributes:

Element <details> mencakup Global Attributes HTML.

Event Attributes:

Element <details> mencakup Event Attributes HTML.

Browser Support :

Desktop

Chrome	12
Safari	6
Firefox	49
Opera	15
IE	-
Edge	-

Mobile

Android Webview	Ya
Chrome Android	Ya
Edge Mobile	-
Firefox Android	49
Opera Android	14
iOs Safari	6.1
Samsung Internet	Ya

Default CSS :

Browser yang support dengan element <details>, biasanya mempunyai nilai default :

details {
  display: block;
}