Тег details в HTML: что это такое?

Дата последнего обновления статьи: 2025-01-01

BODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLE<details>

Это изображениелицензировано подCC BY 4.0

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

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

<details>
  <summary>Заголовок</summary>
  Скрытый контент
</details>

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

open - определяет, должен ли details быть развернутым при загрузке страницы.

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

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

Простой пример

<details>
  <summary>Нажмите, чтобы узнать больше</summary>
  <p>Здесь находится скрытый контент, который появится при клике.</p>
</details>

Details открытый по умолчанию

<details open>
  <summary>Этот details открыт</summary>
  <p>Этот контент виден сразу при загрузке страницы.</p>
</details>

Вложенные details

<details>
  <summary>Первый уровень</summary>
  <p>Контент первого уровня</p>
  <details>
    <summary>Второй уровень</summary>
    <p>Контент второго уровня</p>
  </details>
</details>

Советы по использованию тега details

Всегда используйте тег summary внутри details для лучшей семантики.
Не забывайте о стилизации для улучшения пользовательского опыта.
Используйте атрибут open с осторожностью, чтобы не перегружать страницу открытым контентом.
Вкладывайте details друг в друга только когда это действительно необходимо.
Используйте details для создания адаптивного дизайна.
Маркер тега summary можно заменить на другой элемент. Чтобы его скрыть, в Firefox надо свойство display: list-item тега summary переопределить на display: block, а в Chrome или Safari установить для псевдоэлемента ::webkit-details-marker свойство display: none.

Часто задаваемые вопросы (FAQ)

1 Можно ли вкладывать details друг в друга?

Да, элементы details можно вкладывать друг в друга для создания многоуровневых раскрывающихся списков.

2 Как сделать details открытым по умолчанию?

Для этого нужно добавить атрибут open: <details open>

3 Можно ли стилизовать details с помощью CSS?

Да, details можно стилизовать с помощью CSS. Особенно полезны псевдоэлементы ::marker для настройки маркера раскрытия и селектор [open] для стилизации открытого состояния.

Заключение

Тег details является мощным инструментом для создания интерактивных элементов на веб-странице. Он позволяет организовать контент в раскрывающиеся блоки, что улучшает пользовательский опыт и делает интерфейс более чистым и понятным.

Для получения дополнительной информации о теге details, рекомендуем ознакомиться с официальной документацией на MDN.

Предыдущая страница

Следующая страница