Belajar Element HTML: <summary>

Tag <summary> menentukan ringkasan yang dapat digunakan bersama dengan tag <details>.

Ringkasan ini dapat diklik untuk memperluas/menciutkan detail sebagaimana diperlukan.

Meskipun tag <summary> tidak wajib, namun berguna ketika bekerja dengan beberapa elemen <details>, karena setiap <summary> dapat memberikan ringkasan informatif yang membedakan setiap elemen <details> dari yang lain.

Syntax

Tag <summary> ditulis seperti <summary></summary> dengan ringkasan dimasukkan diantara tag pembuka dan penutup.

Elemen summary harus menjadi anak pertama dari tag <details>. Konten yang dapat diperluas/dilipat secara langsung mengikuti tag <summary>.

<details>
  <summary>Read more</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
</details>

Pengaturan Default CSS

Sebagian besar browser menampilkan elemen <summary> dengan pengaturan CSS:

summary {
  display: block;
}