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

Описание

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

Пример использования:
<ol hidden> <li>Этот список не виден на странице</li> <li>Второй скрытый пункт</li> </ol> <ol> <li>Этот список виден</li> </ol>

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

Состояние Описание Как задать
Скрыт Элемент не отображается и не занимает место <ol hidden> или <ol hidden="hidden">
Видим Обычное отображение (по умолчанию) Отсутствие атрибута hidden

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

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

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

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

Доступность и SEO:

  • Скрытый контент индексируется поисковыми системами
  • Скрытый контент доступен для скринридеров (используйте aria-hidden для полного скрытия)
  • Не используйте для скрытия спама или нерелевантного контента

Ограничения и совместимость:

  • Поддерживается всеми современными браузерами
  • Эквивалентен CSS-правилу display: none
  • Не сохраняет состояние при перезагрузке страницы

Примечание: Атрибут hidden следует использовать осмотрительно. Для контента, который должен быть скрыт навсегда или для определенных устройств, лучше использовать CSS. Для контента, который появляется/исчезает в процессе работы приложения, hidden может быть удобным решением.