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

Описание

Атрибут hidden для тега <tt> скрывает моноширинный текст от отображения в браузере. Это булевый атрибут, который не требует значения - его наличие указывает на скрытое состояние элемента.

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

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

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

Сравнение с CSS-альтернативами:

Метод Пример Различия
Атрибут hidden <tt hidden> Семантическое скрытие, display: none
CSS display tt { display: none } Аналогично, но требует селектора
CSS visibility tt { visibility: hidden } Скрывает содержимое, но сохраняет пространство

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

  • Используйте для временного скрытия без удаления из DOM
  • Для постоянного скрытия предпочтительнее удалять элемент
  • Не используйте как замену безопасности (данные остаются в HTML)
  • Сочетайте с aria-атрибутами для доступности

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

  • Не поддерживается в IE10 и ниже (нужен полифил)
  • Скрытые элементы всё равно загружаются
  • Может влиять на структуру документа

Современная альтернатива:

<!-- Вместо <tt> используйте <span> с классом --> <span class="monospace hidden">Скрытый текст</span> <style> .monospace { font-family: monospace; } .hidden { display: none; } </style>

Примечание: Тег <tt> считается устаревшим в HTML5. Для моноширинного текста используйте <code>, <kbd> или CSS-свойство font-family: monospace.