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

Описание

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

Пример использования:
<footer> Этот футер будет виден на странице </footer> <footer hidden> Этот футер будет скрыт при загрузке страницы </footer>

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

Состояние Как задать Эквивалент в CSS
Скрыт <footer hidden> display: none
Видим <footer> (без атрибута) display: block

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

<footer id="toggle-footer"> Этот футер можно скрывать/показывать </footer> <button onclick="toggleFooter()">Переключить видимость</button> <script> function toggleFooter() { const footer = document.getElementById('toggle-footer'); footer.hidden = !footer.hidden; } </script>

Разница между hidden и CSS display:none

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

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

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

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

<footer hidden aria-hidden="true"> Этот контент скрыт и от вспомогательных технологий </footer> <footer hidden aria-hidden="false"> ! Неправильно: этот контент останется доступен для скринридеров, несмотря на атрибут hidden </footer>

SEO и производительность:

  • Скрытый контент индексируется поисковыми системами
  • Элемент остается в DOM-дереве, но не участвует в визуальном рендеринге
  • Более легковесное решение, чем аналоги на CSS/JavaScript

Примечание: Атрибут hidden удобен для управления видимостью футера в различных состояниях страницы (например, скрывать подвал на мобильных устройствах или в определенных разделах сайта). Однако помните, что это фундаментальное скрытие — для плавных переходов используйте CSS opacity/visibility.