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

Описание

Атрибут hidden позволяет скрыть элемент <abbr> от отображения на странице. Скрытый элемент не виден пользователю, но остается в DOM-дереве.

Базовое использование:
<abbr hidden title="Cascading Style Sheets">CSS</abbr>

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

Характеристика Поведение
Видимость Полностью скрывает элемент (аналог display: none)
Доступность Удаляется из accessibility tree
Место в потоке Не занимает место в верстке
Наследование Не влияет на дочерние элементы

Разница с CSS-скрытием:

  • Семантика: Явно указывает на скрытое состояние
  • Производительность: Браузер может оптимизировать рендеринг
  • Доступность: Лучше обрабатывается скринридерами
  • Специфичность: Не переопределяется CSS (кроме !important)

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

  • Используйте для временного скрытия терминов
  • Не применяйте для важного контента (влияет на SEO)
  • Для постоянного скрытия лучше удалять элемент из DOM
  • Сочетайте с aria-hidden="true" для гарантированного скрытия
  • Альтернатива - рендерить элемент только при необходимости

Важно: Не используйте hidden для скрытия контента, который должен оставаться доступным для SEO или скринридеров. В таких случаях применяйте CSS-техники.

Правильное использование:
<!-- Динамическое управление видимостью --> <button onclick="toggleAbbr()">Показать/скрыть аббревиатуру</button> <abbr id="toggleable-abbr" title="Representational State Transfer">REST</abbr> <script> function toggleAbbr() { const abbr = document.getElementById('toggleable-abbr'); abbr.hidden = !abbr.hidden; } </script>