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

Описание

Атрибут hidden скрывает элемент <p> из видимой области страницы. Это булевый атрибут - его наличие (без значения) делает элемент невидимым.

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

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

Состояние Описание Как задать
Скрыт Элемент не отображается <p hidden> или <p hidden="hidden">
Видим Обычное отображение (по умолчанию) Отсутствие атрибута

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

<style> .hidden-css { display: none; } </style> <p hidden>Скрыто через атрибут hidden</p> <p class="hidden-css">Скрыто через CSS</p>

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

  • Используйте для временного скрытия контента без удаления из DOM
  • Не применяйте для важного контента - он остаётся доступным в HTML
  • Для чувствительной информации используйте серверное управление видимостью
  • Сочетайте с JavaScript для динамического управления

Пример динамического управления:

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

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

  • Скрытый контент не доступен для скринридеров
  • Не влияет на порядок табуляции
  • Эквивалентен ARIA-атрибуту aria-hidden="true"

Примечание: Для контента, который должен быть скрыт от всех пользователей (включая скринридеры), используйте атрибут hidden. Если контент должен быть доступен только для скринридеров, рассмотрите использование CSS-техник (например, visually-hidden).