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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <details> <summary>Judul Infomasi</summary> isi Konten </details> </body> </html>
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <details> <summary>Iklan Baris</summary> <ul> <li>Mobile Rental</li> <li>Handphone Murah</li> <li>Grosir Baju Murah</li> </ul> </details> </body> </html>
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <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> </body> </html>
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 tidakMisal :
|
Contoh :
<details open="open">
<summary>Iklan Baris</summary>
<ul>
<li>Mobile Rental</li>
<li>Handphone Murah</li>
<li>Grosir Baju Murah</li>
</ul>
</details>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <details open="open"> <summary>Iklan Baris</summary> <ul> <li>Mobile Rental</li> <li>Handphone Murah</li> <li>Grosir Baju Murah</li> </ul> </details> </body> </html>
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;
}