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

Описание

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

Пример использования:
<article hidden> <h2>Скрытая статья</h2> <p>Этот контент не виден пользователю, но существует в DOM.</p> </article> <button onclick="document.querySelector('article').removeAttribute('hidden')"> Показать статью </button>

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

Характеристика Описание
Визуальное отображение Элемент полностью скрыт (аналог display: none)
Доступность Скрыт от скринридеров и вспомогательных технологий
DOM-присутствие Элемент остаётся в DOM-дереве
Стилизация Нельзя переопределить через CSS

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

<style> .invisible-article { display: none; } </style> <article hidden> <h2>Скрыто через атрибут hidden</h2> <p>Не видно и не доступно для скринридеров.</p> </article> <article class="invisible-article"> <h2>Скрыто через CSS</h2> <p>Не видно, но может быть доступно для скринридеров.</p> </article>

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

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

Правильное использование в динамическом интерфейсе:

<article id="toggle-article" hidden> <h2>Динамически управляемая статья</h2> <p>Этот контент можно показать или скрыть.</p> </article> <button id="toggle-button">Показать статью</button> <script> const article = document.getElementById('toggle-article'); const button = document.getElementById('toggle-button'); button.addEventListener('click', function() { if (article.hidden) { article.removeAttribute('hidden'); button.textContent = 'Скрыть статью'; } else { article.setAttribute('hidden', ''); button.textContent = 'Показать статью'; } }); </script>

Предупреждение: Не используйте атрибут hidden для скрытия контента, который должен индексироваться поисковыми системами или быть доступным для скринридеров без взаимодействия пользователя.

Лучшие практики:

  • Для контента, который должен быть доступен скринридерам, но скрыт визуально, используйте CSS-классы с position: absolute; left: -9999px
  • Для временного скрытия в SPA-приложениях предпочтительнее условный рендеринг (v-if в Vue, {condition && ...} в React)
  • При скрытии/показе обеспечивайте плавные переходы с помощью CSS-анимаций

Пример доступного скрытия:

<style> .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } </style> <article class="visually-hidden"> <h2>Доступно скрытый контент</h2> <p>Этот контент доступен скринридерам, но скрыт визуально.</p> </article>

Совет: Для сложных сценариев видимости/скрытия контента используйте комбинацию CSS-классов и ARIA-атрибутов (aria-expanded, aria-hidden) для лучшей доступности.

Примечание: Атрибут hidden является частью стандарта HTML5 и поддерживается всеми современными браузерами. Однако его семантическое значение отличается от CSS-свойств скрытия.