Тег <details>

Синтаксис

<details>...</details>

Описание

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

По умолчанию содержимое тега скрыто. Для того, чтобы раскрыть содержимое, необходимо применить атрибут open.

С помощью тега <summary> можно указать заголовок, при нажатии на который будет открываться/закрываться дополнительная информация. Если заголовка нет, то по умолчанию браузер показывает заголовок “Подробнее”.

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

Атрибуты

Атрибут Значение Описание
open не указывается / open

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

Пример

HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тег details</title>
</head>
<body>
    <details>
        <summary>Спойлер!</summary>
        <p>На нашем сайте много актуальной и полезной информации.</p>
    </details>
</body>
</html>

Отображение в браузере:

Спойлер!

На нашем сайте много актуальной и полезной информации.

Параметры CSS по умолчанию

details {
    display: block;
}

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

Элемент

Chrome

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge
<details> Да Да Да Да Да