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

Описание

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

Важно: Скрытые элементы не отображаются, но остаются в DOM и могут быть показаны через CSS или JavaScript.
Пример использования:
<p> Этот текст виден, а <em hidden>этот акцент</em> - скрыт. </p>

Особенности поведения:

Аспект Поведение
Отображение Эквивалентно display: none
Доступность Скрыт от скринридеров и навигации
DOM-присутствие Остается в дереве документа

Правильное применение:

<p id="conditional-text"> Статус: <em hidden id="status-em">неактивен</em> </p> <button onclick="toggleStatus()">Переключить статус</button> <script> function toggleStatus() { const em = document.getElementById('status-em'); em.hidden = !em.hidden; em.textContent = em.hidden ? 'неактивен' : 'активен'; } </script>

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

Метод Отображение Доступность Место в потоке
hidden Полностью скрыт Не доступен Не занимает
display: none Полностью скрыт Не доступен Не занимает
visibility: hidden Невидимый Доступен Занимает

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

<p> <em id="toggle-em">Этот акцент можно скрыть/показать</em> </p> <button onclick="document.getElementById('toggle-em').hidden = true"> Скрыть </button> <button onclick="document.getElementById('toggle-em').hidden = false"> Показать </button>

Советы по использованию:

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

Пример с CSS-анимацией:

<style> .fade { opacity: 1; transition: opacity 0.5s; } .fade[hidden] { display: block; opacity: 0; height: 0; overflow: hidden; } </style> <p> Анимированное <em class="fade" id="fade-em">исчезновение</em> текста </p> <button onclick="document.getElementById('fade-em').hidden = !document.getElementById('fade-em').hidden"> Переключить видимость </button>

Ограничения:

  • Не поддерживается в IE10 и ниже
  • Приоритет ниже, чем у display в CSS
  • Не влияет на производительность

Примечание: Атрибут hidden следует использовать для временного скрытия элементов. Для постоянного скрытия контента предпочтительнее полностью удалять элементы из DOM или использовать CSS с display: none.