Атрибут hidden тега <hr>
Описание
Атрибут hidden позволяет скрыть горизонтальную линию (<hr>) от отображения на странице. Это булевый атрибут - его наличие скрывает элемент, отсутствие делает его видимым.
<hr>
<p>Видимая секция контента</p>
<hr hidden>
<p>Следующая секция без видимого разделителя</p>
<hr>
Особенности работы:
| Состояние | Описание | Эквивалент CSS |
|---|---|---|
| Присутствует | Элемент полностью скрыт | display: none |
| Отсутствует | Элемент отображается нормально | - |
Разница с CSS display:none:
<style>
.invisible-hr {
display: none;
}
</style>
<hr hidden>
<hr class="invisible-hr">
<!-- Оба метода дают одинаковый визуальный результат -->
Рекомендации по использованию:
- Используйте для условного отображения разделителей
- Полезно при программируемом показе/скрытии элементов
- Не заменяет семантическое использование
<hr> - Для постоянного скрытия лучше использовать CSS
Особенности доступности:
- Скрытый элемент удаляется из accessibility tree
- Не доступен для скринридеров
- Не влияет на порядок фокусировки
Пример с условной логикой:
<div id="contentSections">
<section>...</section>
<hr id="sectionDivider">
<section>...</section>
</div>
<script>
// Скрыть разделитель если секций меньше 2
const sections = document.querySelectorAll('#contentSections section');
if (sections.length < 2) {
document.getElementById('sectionDivider').hidden = true;
}
</script>
Примечание: Хотя атрибут hidden удобен для быстрого скрытия элементов, для сложных сценариев отображения рекомендуется использовать CSS-классы или data-атрибуты в сочетании с JavaScript.