<details>

25 января 2023

Что делает тег

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

Синтаксис тега <details>

<details>
  <summary>Заголовок</summary>
  <p>Дополнительная информация</p>
</details>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

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

Примеры использования

Базовый пример:

<details>
  <summary>Нажмите здесь, чтобы показать или скрыть подробности</summary>
  <p>Подробности о чём-то</p>
</details>

Несколько раскрывающихся блоков:

<details>
  <summary>Первый вопрос</summary>
  <p>Ответ</p>
</details>
<details>
  <summary>Второй вопрос</summary>
  <p>Ответ</p>
</details>

Вложенные раскрывающиеся блоки:

<details>
  <summary>Первый блок — нажмите здесь, чтобы показать или скрыть подробности</summary>
  <p>Какие-то подробности</p>
  <details>
    <summary>Второй блок — нажмите здесь, чтобы показать или скрыть детали</summary>
    <p>Подробности о чем-то ещё</p>
  </детали
</details>

Для чего использовать тег <details>

Показать или скрыть дополнительную информацию.
Создать страницу FAQ с раскрывающимися разделами.
Добавить руководство пользователя с раскрываемыми разделами.
Реализовать меню со сворачиваемыми подменю.
Создать список с раскрываемыми элементами.
Сделать форму со сворачиваемыми разделами.
Реализовать фильтр со сворачиваемыми параметрами.

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

open — указывает, должен ли блок быть раскрытым.

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

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

Ограничения

Тег <details> не поддерживается в старых версиях Internet Explorer.

Нюансы

Если тег <summary> не используется внутри элемента <details>, содержимое <details> отображается постоянно, а виджет не создаётся.

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

Тег поддерживается не всеми браузерами.

Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативных тегов для тега <details> не существует.

Чем заменить тег

Если тег <details> не поддерживается в браузере пользователя, используйте JavaScript или CSS для создания собственного виджета с аналогичной функциональностью.