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

Описание

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

Пример использования:
<div hidden> Этот контент скрыт и не отображается </div> <div id="toggleDiv"> Этот блок можно скрыть/показать </div> <button onclick="toggleVisibility()">Переключить видимость</button> <script> function toggleVisibility() { const div = document.getElementById('toggleDiv'); div.hidden = !div.hidden; // Инвертируем текущее состояние } </script>

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

Характеристика Описание
Эквивалент CSS display: none
Доступность Элемент скрыт от скринридеров
DOM-присутствие Элемент остается в DOM-дереве
Наследование Скрывает все дочерние элементы

Сравнение с другими методами скрытия:

<style> .visibility-hidden { visibility: hidden; /* Скрыто, но занимает место */ } .display-none { display: none; /* Полностью скрыто */ } .opacity-zero { opacity: 0; /* Невидимо, но взаимодействуемо */ } </style> <div hidden>Скрыто через hidden</div> <div class="visibility-hidden">Скрыто через visibility</div> <div class="display-none">Скрыто через display</div> <div class="opacity-zero">Скрыто через opacity</div>

Рекомендации по использованию:

  • Используйте для временного скрытия элементов
  • Не применяйте для важного контента, который должен быть доступен
  • Для SEO-критичного контента используйте другие методы (например, позиционирование за пределами экрана)
  • Сочетайте с ARIA-атрибутами для сложных сценариев

Динамическое управление:

<div id="conditionalDiv"> Контент, зависящий от условий </div> <script> // Проверка условия и скрытие элемента if (!userHasAccess) { document.getElementById('conditionalDiv').hidden = true; } // Альтернативные методы const div = document.getElementById('conditionalDiv'); div.setAttribute('hidden', ''); // Установка атрибута div.removeAttribute('hidden'); // Удаление атрибута </script>

Особенности доступности:

<div hidden aria-hidden="true"> Этот контент точно скрыт для скринридеров </div> <div hidden aria-live="polite"> Скрытый контент, но объявляется скринридерами при изменении </div>

Примечание: Хотя атрибут hidden удобен для простого скрытия элементов, для сложных интерфейсов с анимациями и переходами лучше использовать CSS-классы с display: none или visibility: hidden.