hidden
Hides an element: it is not shown and not available to screen readers.
Syntax
<div hidden>…</div>Parameters
| Parameter | Type | Description |
|---|---|---|
| hidden | — | until-found | Hide the element; `until-found` — hide it but reveal it on find-in-page. |
Examples
A hidden block is revealed by a button:
<button onclick="secret.hidden = !secret.hidden">Toggle the answer</button>
<p id="secret" hidden>The answer is 42.</p>Notes
hidden works like display: none, but any CSS rule with display overrides it — for example, .box { display: flex; }. To prevent that, style resets often include [hidden] { display: none !important; }.
See also
- <details>, <summary> — A disclosure block without JavaScript: `<summary>` is the visible title, the rest is hidden until clicked.
- display — Decides how an element behaves in the flow and how it lays out its content.
- inert — Makes part of the page inactive: it cannot be clicked, reached with Tab or selected.
Related recipes
In the tutorial
- Attributes — How HTML attributes work, the global attributes id, class, title, lang, hidden and style, boolean attributes and data attributes.