Атрибут hidden тега <b>
Описание
Атрибут hidden скрывает элемент <b> и его содержимое от визуального отображения на странице. Это глобальный атрибут HTML5, который можно использовать с любым элементом.
<p>
Этот текст виден, а <b hidden>этот</b> - скрыт.
</p>
Особенности работы:
| Характеристика | Поведение | Примечания |
|---|---|---|
| Визуальное отображение | Полностью скрыт | Эквивалентно display: none |
| Доступность | Скрыт от скринридеров | В отличие от CSS-скрытия |
| DOM-присутствие | Элемент остается в документе | Можно найти через JavaScript |
Сравнение методов скрытия:
<!-- Способ 1: Атрибут hidden -->
<b hidden>Скрытое содержимое</b>
<!-- Способ 2: CSS display -->
<b style="display: none;">Скрытое содержимое</b>
<!-- Способ 3: CSS visibility -->
<b style="visibility: hidden;">Скрытое содержимое</b>
JavaScript управление:
const boldElement = document.querySelector('b');
// Скрыть элемент
boldElement.hidden = true;
// Показать элемент
boldElement.hidden = false;
// Переключить видимость
boldElement.hidden = !boldElement.hidden;
// Проверить состояние
console.log('Элемент скрыт:', boldElement.hidden);
Рекомендации по использованию:
- Используйте для временного скрытия контента
- Не применяйте для чувствительной информации (исходный код остается доступным)
- Альтернатива CSS-правилам при динамическом управлении
- Сочетайте с ARIA-атрибутами при необходимости
Ограничения: Скрытый элемент не занимает место в потоке документа (в отличие от visibility: hidden).
Правильное применение:
<div>
<p>
Показать <a href="#" onclick="toggleSecret(event)">секретный текст</a>
</p>
<b hidden id="secret-text">Конфиденциальная информация</b>
</div>
<script>
function toggleSecret(e) {
e.preventDefault();
document.getElementById('secret-text').hidden =
!document.getElementById('secret-text').hidden;
}
</script>
Совет: Для элементов, которые должны быть скрыты от всех пользователей (включая скринридеры), используйте hidden вместо CSS-решений.
Примечание: В отличие от aria-hidden="true", атрибут hidden также удаляет элемент из accessibility tree.