tRikSonic
Tema
  • Original
  • Translate

HTML summary Tag

Terakhir diperbarui : 22 Mei 2018 - 09.56

Tutorial HTML <summary>

Element HTML <summary> digunakan sebagai heading, judul atau keterangan untuk element html <detail>.
html font
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
ElementChromeSafariFirefoxOperaIE / Edge
<summary>12649-0
Nilai pada table menentukan minimal versi browser
Mobile
ElementAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
<summary>4Ya-49---

Default CSS :

Browser yang support dengan element <summary>, mempunyai nilai default :
summary {
    display: block;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.