Тег <details> HTML блок с дополнительной информацией

Рейтинг: 3 из 5, голосов 1
+++--

Тег <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>

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<details> Да Нет Да Да Да

Атрибуты тега <details>

Атрибут Значение Описание
open

не указывается / open

Логический атрибут. Если указан, дополнительная информация будет видна сразу (при загрузке страницы). По умолчанию дополнительная информация скрыта.

Тег <details> также поддерживает глобальные HTML атрибуты.

Оцените, насколько полезна эта страница
+++--
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.