Атрибут hidden тега <summary>

Описание

Атрибут hidden скрывает элемент <summary> и связанный с ним контент внутри <details> от отображения на странице. Элемент остаётся в DOM, но не виден пользователю и не занимает место в вёрстке.

Пример использования:
<details> <summary hidden>Этот заголовок скрыт</summary> <p>Этот контент также будет скрыт, так как скрыт родительский summary</p> </details> <details open> <summary>Этот блок виден</summary> <p>Обычное отображение содержимого</p> </details>

Особенности работы:

  • Скрывает весь элемент <details>, включая содержимое
  • Эквивалентен CSS-свойству display: none
  • Элемент остаётся доступным в DOM-дереве
  • Может быть переопределён CSS с более высоким приоритетом

Рекомендации:

  • Используйте для временного скрытия элементов без удаления из DOM
  • Для постоянного скрытия предпочтительнее удалять элемент
  • Сочетайте с aria-атрибутами для доступности
  • Для сложной логики отображения используйте JavaScript

Ограничения:

  • Не подходит для важного контента - скрытые элементы не индексируются поисковиками
  • Не обеспечивает безопасности - контент можно увидеть в исходном коде
  • Может вызвать проблемы с доступностью, если не использовать правильно

Примечание: Для динамического управления видимостью рекомендуется использовать классы и CSS, а не атрибут hidden.