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

Тег <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 для создания собственного виджета с аналогичной функциональностью.

Актуальность

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


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<ul>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023