Тег <summary>

<summary> задає видимий, клікабельний заголовок для батьківського details — саме по кліку на нього вміст розгортається чи згортається.

Syntax

<summary>Заголовок</summary>

Example

<details>
  <summary>Натисніть, щоб розгорнути</summary>
  <p>Прихований вміст.</p>
</details>

Notes

summary має бути першим прямим дитячим елементом details.
Браузер автоматично додає трикутник-індикатор перед текстом summary, стилізується через ::marker у сучасних браузерах.

Схожі інструменти

Тег <details>

Атрибут open тегу <details> та зв'язок із summary для нативного акордеону.