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;
}