Атрибут hidden тега <code>
Описание
Атрибут hidden скрывает элемент <code> и его содержимое от отображения в браузере. Это глобальный атрибут HTML, который можно использовать для временного скрытия фрагментов кода без удаления их из DOM.
<code hidden>
// Этот код будет скрыт
const secretAlgorithm = () => {...};
</code>
<code>// Этот код виден</code>
Особенности работы:
| Аспект | Поведение |
|---|---|
| Отображение | Полностью скрывает элемент (аналог display: none) |
| Доступность | Скрыт для скринридеров и поисковых систем |
| Место в DOM | Элемент остается в дереве документа |
| Наследование | Скрывает все дочерние элементы |
Практические сценарии использования:
- Скрытие примеров кода по умолчанию (с возможностью показа):
<button onclick="toggleCode()">Показать решение</button> <code id="solution" hidden> // Правильное решение function solve() {...} </code> <script> function toggleCode() { document.getElementById('solution').toggleAttribute('hidden'); } </script>
- Хранение шаблонов кода для последующего использования:
<code id="template" hidden> // Шаблон функции function $NAME$($PARAMS$) { $BODY$ } </code>
Сравнение с CSS-аналогами:
| Метод | Преимущества | Недостатки |
|---|---|---|
hidden |
Семантический, прост в использовании | Меньше контроля над анимациями |
display: none |
Гибкость, поддержка анимаций | Требует CSS |
visibility: hidden |
Сохраняет пространство | Элемент остается в потоке |
Рекомендации по использованию:
- Используйте для временного скрытия (не для важного контента)
- Сочетайте с JavaScript для интерактивного показа/скрытия
- Не применяйте для чувствительных данных (можно увидеть в исходном коде)
- Для постоянного скрытия лучше удалять элемент из DOM
Особенности доступности:
- Скрытые элементы игнорируются скринридерами
- Не влияют на порядок навигации с клавиатуры
- Для скрытия визуально (но не от скринридеров) используйте
aria-hidden="true"
Примечание: Хотя атрибут hidden удобен для быстрого скрытия фрагментов кода, помните, что для сложных сценариев (с анимациями, постепенным исчезновением) лучше использовать CSS-решения.