Атрибут hidden тега <i>
Описание
Атрибут hidden позволяет скрыть элемент <i> и его содержимое от отображения на странице. Это булевый атрибут - его наличие скрывает элемент, отсутствие делает его видимым.
<p>
Этот текст виден, а <i hidden>этот курсив</i> - скрыт.
</p>
<!-- Иконка, которая может быть показана позже -->
<i class="fa fa-exclamation" hidden></i>
Особенности работы:
| Состояние | Описание | Эквивалент CSS |
|---|---|---|
| Присутствует | Элемент полностью скрыт | display: none |
| Отсутствует | Элемент отображается нормально | - |
Динамическое управление:
<i id="toggleIcon" class="fa fa-info-circle"></i>
<button onclick="toggleIcon()">Переключить видимость</button>
<script>
function toggleIcon() {
const icon = document.getElementById('toggleIcon');
icon.hidden = !icon.hidden;
}
</script>
Разница с CSS display:none:
<style>
.hidden-icon { display: none; }
</style>
<i hidden>Скрыто через атрибут</i>
<i class="hidden-icon">Скрыто через CSS</i>
<!-- Оба метода дают одинаковый визуальный результат -->
Рекомендации по использованию:
- Используйте для:
- Временного скрытия элементов
- Условного отображения иконок
- Элементов, которые показываются по действию пользователя
- Избегайте:
- Скрытия важного контента без альтернативы
- Использования для семантически значимой информации
- Для постоянного скрытия лучше использовать CSS
Особенности доступности:
- Скрытые элементы удаляются из accessibility tree
- Не доступны для скринридеров
- Не участвуют в порядке фокусировки
- Для скрытия с сохранением доступности используйте другие методы
Примечание: Хотя атрибут hidden удобен для быстрого скрытия элементов, для сложных сценариев отображения рекомендуется использовать CSS-классы или комбинацию aria-hidden и visibility.