Тег <details>

Описание

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

Базовая реализация:
<details> <summary>Подробная информация</summary> <p>Скрытое содержимое, которое появится при клике.</p> </details>
Открытое по умолчанию:
<details open> <summary>Частые вопросы</summary> <p>Ответ на часто задаваемый вопрос.</p> </details>
Стилизация и вложенные элементы:
<style> details { border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; } summary { cursor: pointer; font-weight: bold; } </style> <details> <summary>Инструкция</summary> <ol> <li>Шаг первый</li> <li>Шаг второй</li> </ol> </details>

Ключевые особенности:

  • Работает без JavaScript (нативный HTML-элемент)
  • Обязательно должен содержать <summary> (первый дочерний элемент)
  • Поддерживает атрибут open для отображения по умолчанию
  • Может содержать любые HTML-элементы внутри
  • Доступен для стилизации через CSS

Практические применения:

  • Создание аккордеонов и раскрывающихся панелей
  • Организация FAQ-разделов
  • Скрытие дополнительной информации
  • Постепенное раскрытие сложного контента

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

  • Всегда добавляйте понятный текст в <summary>
  • Для сложных виджетов можно управлять состоянием через JavaScript
  • Используйте ARIA-атрибуты для улучшения доступности
  • Тестируйте кросс-браузерную совместимость (частичная поддержка в IE/Edge)

Атрибуты

open Указывает, что содержимое элемента должно быть видимым при загрузке страницы
accesskey Определяет горячую клавишу для активации/фокусировки элемента
class Задает один или несколько классов CSS для стилизации элемента
contenteditable Указывает, может ли пользователь редактировать содержимое элемента
data-* Используется для хранения пользовательских данных в элементах
dir Определяет направление текста: слева направо (ltr) или справа налево (rtl)
hidden Скрывает элемент, делая его невидимым и недоступным для пользователя
id Уникальный идентификатор элемента в документе
lang Определяет язык содержимого элемента
spellcheck Указывает, должна ли проверяться орфография в содержимом элемента
style Позволяет задавать CSS-стили непосредственно в атрибуте элемента
tabindex Определяет порядок перехода между элементами при нажатии Tab
title Задает всплывающую подсказку при наведении на элемент
translate Указывает, должен ли переводиться текст внутри элемента

Поддержка браузерами
79.0 12.0 15.0 49.0 6.0