hidden
Скрывает элемент: он не показывается и недоступен программам чтения с экрана.
Синтаксис
<div hidden>…</div>Параметры
| Параметр | Тип | Описание |
|---|---|---|
| hidden | — | until-found | Скрыть элемент; `until-found` — скрыть, но раскрыть при поиске по странице. |
Примеры
Скрытый блок показывается по кнопке:
<button onclick="secret.hidden = !secret.hidden">Toggle the answer</button>
<p id="secret" hidden>The answer is 42.</p>Примечания
hidden работает как display: none, но любое правило CSS с display его перебивает — например, .box { display: flex; }. Чтобы этого не случалось, в сбросы стилей добавляют [hidden] { display: none !important; }.
См. также
- <details>, <summary> — Раскрывающийся блок без JavaScript: `<summary>` — видимый заголовок, остальное скрыто до клика.
- display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.
- inert — Делает часть страницы неактивной: по ней нельзя кликнуть, перейти клавишей Tab или выделить текст.
Вопросы и ответы по теме
В учебнике
- Атрибуты — Как устроены атрибуты HTML, глобальные атрибуты id, class, title, lang, hidden и style, логические атрибуты и data-атрибуты.