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

Описание

Атрибут hidden скрывает элемент <strong> и его содержимое от отображения в браузере. Это глобальный атрибут HTML, который можно использовать с любым элементом.

Пример использования:
<p> Видимый текст <strong hidden>Скрытый важный текст</strong> </p>

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

  • Полностью удаляет элемент из визуального отображения
  • Эквивалентен CSS-свойству display: none
  • Элемент не занимает место в потоке документа
  • Скрывает содержимое от screen readers (в отличие от CSS-скрытия)

Сравнение с CSS скрытием:

Характеристика Атрибут hidden CSS display: none
Синтаксис HTML-атрибут CSS-свойство
Доступность Полностью скрыт Может потребоваться aria-hidden
Приоритет Можно переопределить CSS Высокий приоритет

Рекомендации:

  • Используйте для временного скрытия элементов
  • Для семантического скрытия предпочтительнее hidden, чем CSS
  • Для постоянного скрытия используйте CSS
  • Сочетайте с JavaScript для динамического управления видимостью

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

  • Не поддерживает анимации перехода
  • Менее гибкий, чем CSS-решения
  • Нельзя стилизовать скрытое состояние

Пример правильного использования:

<p> Основной текст <strong hidden aria-hidden="true">Скрытая дополнительная информация</strong> </p> <!-- Будет показано при определенных условиях --> <strong id="dynamic-text" hidden>Динамический текст</strong>

Альтернативы для специальных случаев:

<style> /* Для скрытия с сохранением доступности */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } </style> <strong class="visually-hidden">Текст для screen readers</strong>

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