Тег <summary>

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

Syntax

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

Example

<details>
  <summary>Нажмите, чтобы раскрыть</summary>
  <p>Скрытое содержимое.</p>
</details>

Notes

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

Похожие инструменты

Тег <details>

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