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