HTML глобальный атрибут hidden
Определение и применение
Глобальный атрибут hidden скрывает содержимое элемента от просмотра на странице.
Атрибут hidden, как правило, используется, чтобы пользователь не видел элемент до тех пор, пока другое
условие не будет выполнено (например, требование проставить галочку). Используя впоследствии JavaScript вы можете
удалить скрытый атрибут у элемента, и сделать элемент видимым для пользователя.
Синтаксис:
<element hidden>
<element hidden="until-found">
Поддержка браузерами
Спецификация: multipage
Поддерживается во всех основных браузерах с 2015 года.
Отдельные значения (1) поддерживаются не везде — смотрите таблицу.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
hidden | 10 | 12 | 4 | 15 | 5.1 Версия 5.1 выпущена в 2011 г. Примечание MDN (англ.) This attribute has no effect on | 18 | 4 | 14 | 5 Версия 5 выпущена в 2011 г. Примечание MDN (англ.) This attribute has no effect on | 1.0 | 4 | 5 Версия 5 выпущена в 2011 г. Примечание MDN (англ.) This attribute has no effect on |
until-found | 102 | 102 | 148 Версия 148 выпущена в 2026 г. Версия 139 выпущена в 2025 г. — Удалено в 148; Частичная поддержка Примечание MDN (англ.) The browser does not correctly scroll to the matching text. See bug 2006040. | 88 | 26.2 Версия 26.2 выпущена в 2025 г. — Частичная поддержка Примечание MDN (англ.) The browser does not correctly scroll to the matching text. See bug 304174. | 102 | 148 Версия 148 выпущена в 2026 г. Версия 139 выпущена в 2025 г. — Удалено в 148; Частичная поддержка Примечание MDN (англ.) The browser does not correctly scroll to the matching text. See bug 2006040. | 70 | 26.2 Версия 26.2 выпущена в 2025 г. — Частичная поддержка Примечание MDN (англ.) The browser does not correctly scroll to the matching text. See bug 304174. | 19.0 | 102 | 26.2 Версия 26.2 выпущена в 2025 г. — Частичная поддержка Примечание MDN (англ.) The browser does not correctly scroll to the matching text. See bug 304174. |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
Значения атрибута
Атрибут имеет два значения: hidden скрывает неактуальное содержимое, а until-found позволяет
найти скрытый раздел через поиск по странице или ссылку с фрагментом.
| Значение | Описание |
|---|---|
hidden |
Скрывает элемент. Пустой атрибут имеет тот же эффект; запись hidden="false" тоже скрывает
элемент. Для показа удалите атрибут.
|
until-found |
Содержимое скрыто, но доступно поиску по странице и переходу к якорю. При раскрытии браузер удаляет атрибут;
перед этим возникает событие beforematch (сигнал о раскрытии, в обработчике можно, например, загрузить или отметить раздел).
|
Не применяйте [hidden] { display: none; } ко всем режимам: это мешает раскрытию until-found.
Если собственное правило нужно, исключите этот режим: [hidden]:not([hidden="until-found" i]).
В современных браузерах собственное правило скрытия не требуется. В режиме until-found сохраняются рамки
и отступы; не задавайте элементу display: none, contents или inline.
Скрытие не удаляет данные из документа и не защищает секреты. Для обычного hidden содержимое скрыто и от
средств чтения с экрана, но скрипты и элементы форм продолжают работать.
В примере поиска скрытого раздела сравните оба режима. Если браузер не
поддерживает until-found, раздел останется скрытым: предусматривайте другой способ открыть важное
содержимое.
Спецификация
Примеры, попробуйте сами
Глобальный атрибут hidden
Удалите hidden, чтобы появился второй абзац.
index.html
<p>Видимый абзац.</p>
<p hidden>Скрытый абзац.</p>
Поиск скрытого раздела
Нажмите ▶. Найдите слово «Метеорит» через Ctrl+F или перейдите по ссылке: раздел откроется, а строка ниже сообщит о событии beforematch. Затем замените until-found на hidden и повторите поиск.
index.html
<p><a href="#answer">Перейти к ответу</a></p>
<section id="answer" hidden="until-found">
<h2>Ответ</h2>
<p>Метеорит — тело, достигшее поверхности Земли.</p>
</section>
<p id="status">Раздел скрыт.</p>
main.js
const answer = document.getElementById('answer')
const status = document.getElementById('status')
// beforematch возникает перед тем, как браузер удалит hidden и покажет раздел
answer.addEventListener('beforematch', function () {
status.textContent = 'Событие beforematch: раздел раскрыт поиском или переходом по ссылке.'
})
Нажмите ▶, чтобы запустить пример.