САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ
Баннер ТОП

HTML тег <details>


Пример

Использование элемента <details>:

<details>
  <summary>Copyright 1999-2020.</summary>
  <p> - by Refsnes Data. Все права защищены.</p>
  <p>Весь контент и графика на этом сайте являются собственностью компании Refsnes Data.</p>
</details>
Попробуйте сами »

Определение и использование

Тег <details> определяет дополнительные детали, которые пользователь может просматривать или скрывать по требованию.

Тег <details> можно использовать для создания интерактивного виджета, который пользователь может открывать и закрывать. Любой контент может быть помещен в тег <details>.

Содержимое элемента <details> не должно быть видимым, если не установлен атрибут open.


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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.

Элемент
<details> 12.0 Не поддерживается 49.0 6.0 15.0

Различия между HTML 4.01 и HTML5

Тег <details> новый в HTML5.


Советы и примечания

Совет: Тег <summary> используется для указания видимого заголовка для details. Заголовок можно кликнуть, чтобы просмотреть / скрыть детали.

Атрибуты

Атрибут Значение Описание
open open Указывает, что детали должны быть видимы (открыты) для пользователя

Глобальные атрибуты

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


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

Тег <details> также поддерживает Атрибуты событий в HTML.


Связанные страницы

HTML DOM справочник: Объект Details


Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент <details> со следующими значениями по умолчанию:

details {
  display: block;
}