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

Описание

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

Пример использования:
<header hidden> <h1>Этот заголовок не виден на странице</h1> <nav>...</nav> </header> <header> <h1>Обычный видимый заголовок</h1> </header>

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

Состояние Описание Эквивалент в CSS
Присутствует Элемент полностью скрыт display: none
Отсутствует Элемент отображается нормально -
Динамически изменён Можно показывать/скрывать через JS -

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

<header id="toggleHeader"> <h1>Переключаемый заголовок</h1> </header> <button onclick="toggleHeader()">Переключить видимость</button> <script> function toggleHeader() { const header = document.getElementById('toggleHeader'); header.hidden = !header.hidden; } </script>

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

  • Используйте для временного скрытия элементов
  • Не применяйте для важного контента (индексируется, но не виден)
  • Альтернатива CSS-правилу display: none
  • Для семантического скрытия используйте aria-hidden="true"
  • Не злоупотребляйте - скрытые элементы остаются в DOM

Разница с CSS display:none:

<style> .css-hidden { display: none; } </style> <header hidden> <h1>Скрыто через атрибут hidden</h1> </header> <header class="css-hidden"> <h1>Скрыто через CSS</h1> </header> <!-- Оба метода дают одинаковый визуальный результат -->

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

  • Скрытый контент недоступен для скринридеров
  • Не влияет на SEO (контент остаётся в DOM)
  • Для временного скрытия с сохранением доступности используйте:
    • visibility: hidden
    • opacity: 0
    • aria-hidden="false"

Примечание: Атрибут hidden - это простой способ скрыть элемент без изменения CSS. Однако для сложных сценариев показывания/скрытия лучше использовать классы и CSS, так как это даёт больше контроля над анимациями и переходами.