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

Описание

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

Пример использования:
<ul hidden> <li>Скрытый пункт 1</li> <li>Скрытый пункт 2</li> </ul> <p>Этот список скрыт атрибутом hidden</p>

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

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

Когда использовать:

Ситуация Пример Альтернативы
Временное скрытие Списки, которые появятся позже CSS-классы
Условное отображение Списки для определённых ролей пользователей Серверное управление
Резервные варианты Альтернативные варианты списков CSS @media

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

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

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

  • Не подходит для скрытия чувствительных данных
  • Может быть переопределён CSS (display: block !important)
  • Не влияет на производительность (элемент остаётся в DOM)

Пример правильного использования:

<ul id="additional-options" hidden aria-hidden="true"> <li>Дополнительная опция 1</li> <li>Дополнительная опция 2</li> </ul> <button onclick="document.getElementById('additional-options').removeAttribute('hidden')"> Показать дополнительные опции </button>
Важно: Не используйте атрибут hidden для:
  • Скрытия важной информации (она остаётся в HTML-коде)
  • Управления видимостью контента для SEO
  • Элементов, которые должны быть скрыты только визуально

Сравнение с CSS display:none:

Характеристика Атрибут hidden CSS display: none
Семантика Явное указание на скрытие Презентационное правило
Приоритет Может быть переопределён CSS Зависит от специфичности
Доступность Скрывает от screen readers Скрывает от screen readers