Tutorial HTML <summary>
Element HTML
<summary>
digunakan sebagai heading, judul atau keterangan untuk element html <detail>
.Element
<summary>
dalam penerapannya harus menjadi element pertama didalam element <detail>
.Contoh HTML <summary>
<details> <summary>Agen Kami</summary> <ol> <li>Anita, +620000000000</li> <li>merrie, +620000000000</li> <li>Nanda, +620000000000</li> </ol> </details>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <details> <summary>Agen Kami</summary> <ol> <li>Anita, +620000000000</li> <li>merrie, +620000000000</li> <li>Nanda, +620000000000</li> </ol> </details> <p> Klik teks diatas untuk menampilkan dan menghilangkan </p> </body> </html>
Contoh HTML <summary>
<details> <summary>Iklan Baris</summary> <section> <h3>Mobile Rental</h3> <p>Jasa rental mobile murah daerah ABCDEF...</p> </section> <section> <h3>Handphone Murah</h3> <p>Menjual berbagai macam tipe handphone, harga miring...</p> </section> <section> <h3>Grosir Baju Murah</h3> <p>Grosir baju termurah seindonesia, ready stock...</p> </section> </details>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> section { padding : 10px; border : 1px solid silver; border-radius :5px; margin : 15px 0px; } </style> </head> <body> <details> <summary>Iklan Baris</summary> <section> <h3>Mobile Rental</h3> <p>Jasa rental mobile murah daerah ABCDEF...</p> </section> <section> <h3>Handphone Murah</h3> <p>Menjual berbagai macam tipe handphone, harga miring...</p> </section> <section> <h3>Grosir Baju Murah</h3> <p>Grosir baju termurah seindonesia, ready stock...</p> </section> </details> <p> Klik teks Iklan baris diatas untuk menampilkan dan menghilangkan </p> </body> </html>
Global Attributes:
Element <summary> mencakup Global Attributes HTML.
Event Attributes:
Element <summary> mencakup Event Attributes HTML.
Browser Support
Desktop
Element | Chrome | Safari | Firefox | Opera | IE / Edge |
<summary> | 12 | 6 | 49 | - | 0 |
Nilai pada table menentukan minimal versi browser |
Mobile
Element | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
<summary> | 4 | Ya | - | 49 | - | - | - |
Default CSS :
Browser yang support dengan element
<summary>
, mempunyai nilai default :summary { display: block; }