Атрибут hidden тега <mark>
Описание
Атрибут hidden для тега <mark> скрывает выделенный фрагмент текста от отображения на странице. Это булевый атрибут - его наличие (без значения) скрывает элемент, отсутствие - показывает.
<p>
Этот текст содержит
<mark hidden>скрытое выделение</mark>,
которое не видно пользователю.
</p>
Особенности работы:
| Состояние | Вид в браузере | Доступность в DOM |
|---|---|---|
С атрибутом hidden |
Не отображается | Остаётся в DOM-дереве |
| Без атрибута | Отображается нормально | Виден в DOM |
Динамическое управление:
<p>
<mark id="toggle-mark">Это выделение можно скрыть/показать</mark>
</p>
<button onclick="toggleVisibility()">Переключить видимость</button>
<script>
function toggleVisibility() {
const mark = document.getElementById('toggle-mark');
mark.hidden = !mark.hidden;
}
</script>
Отличие от CSS display:none:
<style>
.css-hidden { display: none; }
</style>
<p>
<mark hidden>Скрыто атрибутом</mark> и
<mark class="css-hidden">Скрыто CSS</mark> -
оба не видны, но подходы разные.
</p>
Рекомендации по использованию:
- Используйте для временного скрытия контента без удаления из DOM
- Не применяйте для важной информации - пользователи могут её не увидеть
- Для SEO-критичного контента лучше использовать другие методы
- Сочетайте с ARIA-атрибутами для доступности
Пример с сохранением в localStorage:
<p>
<mark id="persistent-mark">Это выделение можно скрыть навсегда</mark>
</p>
<button onclick="hidePermanently()">Скрыть навсегда</button>
<script>
// Проверяем сохранённое состояние
if (localStorage.getItem('markHidden') {
document.getElementById('persistent-mark').hidden = true;
}
function hidePermanently() {
const mark = document.getElementById('persistent-mark');
mark.hidden = true;
localStorage.setItem('markHidden', 'true');
}
</script>
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Не влияет на доступность для скринридеров (нужны дополнительные атрибуты)
- Может быть переопределён CSS (например,
[hidden] { display: block !important; }) - Не подходит для защиты конфиденциальной информации
Примечание: Атрибут hidden следует использовать осмотрительно. Для семантического скрытия контента от всех пользователей (включая скринридеры) лучше сочетать его с aria-hidden="true". Для показа/скрытия с анимацией предпочтительнее использовать CSS.