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

Описание

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

Пример использования:
<p> Формула: a<sup hidden>2</sup> + b<sup>2</sup> = c<sup>2</sup> </p>

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

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

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

Сценарий Пример
Временное скрытие <sup hidden>*</sup>
Условное отображение <sup hidden="until-found">1</sup>

Пример с динамическим контентом:

<p> Результат: x<sup id="result-exponent" hidden>n</sup> </p>

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

  • Используйте для временного скрытия элементов без удаления из DOM
  • Для важного контента используйте другие методы скрытия
  • Сочетайте с ARIA-атрибутами для доступности
  • Для постоянного скрытия предпочтительнее удалять элемент

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

  • Не подходит для контента, который должен быть доступен для SEO
  • Не обеспечивает безопасности - контент виден в исходном коде
  • Может вызвать проблемы с доступностью, если не использовать правильно

Примечание: Для скрытия контента, который должен оставаться доступным для скринридеров, используйте CSS-свойства clip или position: absolute с отрицательными координатами.