<summary> - HTML-елемент для підсумку

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

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

Елемент <summary> повинен бути першим дочірнім елементом всередині <details>.

HTML
<details>
  <summary>Заголовок</summary>
  <p>Прихований вміст...</p>
</details>

Атрибути

Цей тег може мати глобальні атрибути.

Технічне резюме

Категорія контенту	Немає.
Дозволений вміст	Фразовий контент, за бажанням з одним елементом заголовка.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Елемент `<details>`. Він має бути першим дочірнім елементом.
Роль ARIA	Немає відповідної ролі.
DOM інтерфейс	`HTMLElement`

Приклади використання

<details>
  <summary>Системні вимоги</summary>
  <p>Потрібен комп’ютер з сучасною операційною системою, мінімум 4 ГБ оперативної пам’яті та 10 ГБ вільного місця на диску.</p>
</details>

Стилі за замовчуванням

CSS
summary {
  display: list-item;
  cursor: pointer;
}

Підтримка браузерів



`<summary>`
`display_list_item`