HTML тег <summary>

Значение и применение

Тег <summary> определяет видимый заголовок для тега <details>. Если элемент не используется, то устанавливается значение браузера по умолчанию (как правило, заголовок "Подробнее").

Элемент <details> уже предоставляет раскрывающийся блок без скриптов. Заголовок остаётся видимым, остальная информация открывается при наличии атрибута open.

Разместите <summary> первым дочерним элементом <details>. Он переключает блок мышью, касанием и клавишами Enter или Пробел. Дайте ему понятное название: например, «Условия доставки». Не создавайте вручную кнопку и обработчик для поведения, которое уже обеспечивает браузер.

Поддержка браузерами

Спецификация: multipage

✓Поддерживается во всех основных браузерах с 2020 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.summary

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
summary	✓12	✓79	✓49	✓15	✓6	✓18	✓49	✓14	✓6	✓1.0	✓4	✓6
display: list-item	✓89	✓89	✓49	✓75	×Нет	✓89	✓49	✓63	×Нет	✓15.0	✓89	×Нет

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

Примеры, попробуйте сами

Заголовок блока

Измените summary и раскройте блок мышью, касанием или клавиатурой.

index.html

HTML

<details>
  <summary>Дополнительная информация</summary>
  <p>Содержимое раскрытого блока.</p>
</details>

Значение CSS по умолчанию

summary {
display: list-item;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".