Атрибут hidden тега <span>
Описание
Атрибут hidden скрывает элемент <span> от отображения на странице. Элемент остаётся в DOM, но не виден пользователю и не занимает место в вёрстке.
Пример использования:
<p>
Видимый текст
<span hidden>скрытый текст</span>
продолжение видимого текста.
</p>
Особенности работы:
- Семантика: Явно указывает, что элемент временно неактивен
- Доступность: Скрытые элементы игнорируются скринридерами
- Стилизация: Эквивалентен
display: none - DOM: Элемент остаётся в дереве документа
Сравнение с другими методами скрытия:
| Метод | Видимость | Доступность | Место в потоке |
|---|---|---|---|
hidden |
Не виден | Игнорируется | Не занимает |
display: none |
Не виден | Игнорируется | Не занимает |
visibility: hidden |
Не виден | Может обнаруживаться | Занимает |
opacity: 0 |
Не виден | Обнаруживается | Занимает |
Рекомендации:
- Используйте для временно скрываемых элементов
- Для семантического скрытия предпочитайте
hiddenатрибут - Для постоянного скрытия используйте CSS
display: none - Не используйте для важного контента, который должен быть доступен
Ограничения:
- Не поддерживает CSS-анимации
- В старых браузерах может потребоваться полифил
- Не влияет на порядок в DOM
Доступность (a11y):
<span hidden aria-hidden="true">
Этот текст скрыт и игнорируется скринридерами
</span>