Тег <details> определяет HTML контейнер, содержащий видимую информацию (заголовок блока) и расширенную (дополнительную) информацию, которую пользователь может увидеть, кликнув по заголовку блока.
Видимая информация указывается в теге <summary> внутри тега details. При клике по нему будет раскрыт весь контент блока <details>.
Если тег <summary> отсутствует, как заголовок будет показано зарезервированное слово, например, "Подробнее" в Google Chrome, "Подробности" в Mozilla Firefox.
Этот тег был введен в HTML5.
Синтаксис
<details>контент</details>Отображение в браузере
Подробнее о стандарте HTML5
HTML - язык гипертекстовой разметки.
Пятая версия HTML была опубликована 28 октября 2014 года.
Пример использования <details> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Блок с дополнительной информацией details в HTML</title>
</head>
<body>
<details>
<summary>Подробнее о стандарте HTML5</summary>
<p>HTML - язык гипертекстовой разметки.</p>
<p>Пятая версия HTML была опубликована 28 октября 2014 года.</p>
</details>
</body>
</html>Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| <details> | Да | Нет | Да | Да | Да |
Атрибуты тега <details>
| Атрибут | Значение | Описание |
|---|---|---|
| open |
не указывается / open |
Логический атрибут. Если указан, дополнительная информация будет видна сразу (при загрузке страницы). По умолчанию дополнительная информация скрыта. |
Тег <details> также поддерживает глобальные HTML атрибуты.
