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

Описание

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

Пример использования:
<ul> <li>Видимый пункт списка</li> <li hidden>Скрытый пункт списка</li> <li hidden="hidden">Еще один скрытый пункт</li> </ul>

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

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

Динамическое управление видимостью:

<ul> <li id="toggle-item">Этот элемент можно скрыть/показать</li> </ul> <button onclick="toggleVisibility()">Переключить видимость</button> <script> function toggleVisibility() { const item = document.getElementById('toggle-item'); item.hidden = !item.hidden; } </script>

Разница между hidden и display:none:

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

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

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

Доступность (a11y):

  • Скрытые элементы не доступны для скринридеров
  • Для скрытых элементов рекомендуется использовать aria-hidden="true"
  • Не используйте для скрытия контента, который должен быть доступен для SEO

Пример с сохранением пространства:

<style> .invisible { visibility: hidden; } </style> <ul> <li hidden>Полностью скрыт (hidden)</li> <li class="invisible">Невидим, но место сохраняется</li> </ul>

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

  • Поддерживается всеми современными браузерами
  • В IE11 требует полифила для полной поддержки
  • Не влияет на производительность (элемент остается в DOM)
  • Может конфликтовать с CSS-правилами display

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