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

Описание

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

Пример использования:
<cite hidden>Эта цитата не будет видна на странице</cite> <cite>А эта цитата отображается нормально</cite>

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

Аспект Поведение
Отображение Элемент полностью скрыт (аналог display: none)
Доступность Скрыт для скринридеров и поисковых систем
Место в DOM Элемент остается в дереве документа
Наследование Скрывает все дочерние элементы

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

  • Используйте для временного скрытия элементов (без удаления из DOM)
  • Не применяйте для важного контента - он будет недоступен
  • Для условного отображения сочетайте с JavaScript
  • Альтернатива - CSS-классы с display: none

Пример с JavaScript:

<cite id="toggle-cite">Цитата, которую можно скрыть/показать</cite> <button onclick="document.getElementById('toggle-cite').toggleAttribute('hidden')"> Переключить видимость </button>

Разница с CSS display:none:

<style> .hidden-cite { display: none; } </style> <cite hidden>Скрыто через атрибут hidden</cite> <cite class="hidden-cite">Скрыто через CSS</cite>

Важные замечания:

  • Не используйте для сокрытия важной информации (можно увидеть в исходном коде)
  • Скрытые элементы не занимают место в верстке
  • Можно переопределить через CSS: [hidden] { display: block !important; }
  • Поддерживается всеми современными браузерами

Советы по доступности:

  • Не злоупотребляйте скрытием контента - это может нарушить доступность
  • Для скрытия/отображения предпочитайте aria-hidden="true/false"
  • Учитывайте, что скринридеры игнорируют hidden-элементы

Примечание: Хотя атрибут hidden удобен для временного скрытия цитат, помните, что семантически важные элементы (вроде <cite>) обычно не должны скрываться без веской причины.