hidden
Control element visibility and interactivity. Covers hidden, hidden='until-found', and inert — three levels of removing content from the user experience.
Overview
Three native attributes control whether and how users can see and interact with content. They represent three levels of removal from the user experience:
| Attribute | Visible | Interactive | In Accessibility Tree | Find-in-Page |
|---|---|---|---|---|
hidden | No | No | No | No |
hidden="until-found" | No | No | Yes | Yes (reveals on find) |
inert | Yes | No | No | Yes |
| (none) | Yes | Yes | Yes | Yes |
hidden
The hidden attribute removes an element from rendering entirely. It behaves like display: none but is semantic — it declares that the content is not relevant to the current state of the page.
<!-- Completely hidden: removed from rendering and accessibility tree --><div hidden> This content is invisible, unfocusable, and ignored by screen readers.</div> <!-- Conditionally show/hide with JavaScript --><div id="details" hidden> <p>Additional details appear here.</p></div><button onclick="document.getElementById('details').hidden = !document.getElementById('details').hidden"> Toggle Details</button>When to Use hidden
- Conditional UI: Content that should appear only in certain states (logged in, feature enabled, etc.)
- Template content: Fragments cloned by JavaScript
- Deferred content: Content loaded after user interaction
hidden="until-found"
A newer value that collapses content visually but allows the browser to reveal it during find-in-page (Ctrl+F) searches. When a match is found inside, the browser fires a beforematch event and removes the hidden attribute.
This is useful for long FAQ pages, accordions, or collapsed sections where users should be able to search for content without expanding every section manually.
<!-- Hidden until browser find-in-page reveals it --><details> <summary>FAQ: How do I reset my password?</summary> <div hidden="until-found"> <p>Go to Settings, then Security, then click "Reset Password".</p> </div></details>inert
The inert attribute keeps content visible but makes it completely non-interactive. Inert elements cannot be clicked, focused, selected, or found by assistive technology. The browser applies a visual dimming effect.
<!-- Visible but completely non-interactive --><form inert> <label for="name">Name</label> <input type="text" id="name" value="Read-only form" /> <button type="submit">Submit</button></form>The form above is inert — try clicking or tabbing into it.
When to Use inert
- Behind modals: Prevent interaction with page content while a dialog is open. Note:
<dialog>withshowModal()applies inert automatically. - Loading states: Disable a form section while a submission is in progress
- Preview mode: Show content that shouldn't be interacted with yet
- Step-by-step flows: Disable future steps until the current step is complete
<!-- Disable page content while a modal is open --><main id="page-content"> <h1>Page Content</h1> <p>This becomes inert when the modal opens.</p></main> <dialog id="my-dialog"> <p>Modal content here. The page behind is inert.</p> <button onclick="this.closest('dialog').close()">Close</button></dialog>JavaScript API
Both hidden and inert are reflected as boolean properties on the element.
<h2>Comparison with CSS</h2><table> <thead><tr><th>Approach</th><th>Visual</th><th>Accessibility</th><th>Semantic</th></tr></thead> <tbody> <tr><td><code>hidden</code></td><td>Removed from layout</td><td>Removed from tree</td><td>Yes — declares irrelevance</td></tr> <tr><td><code>display: none</code></td><td>Removed from layout</td><td>Removed from tree</td><td>No — only visual</td></tr> <tr><td><code>visibility: hidden</code></td><td>Invisible but occupies space</td><td>Removed from tree</td><td>No</td></tr> <tr><td><code>.visually-hidden</code></td><td>Invisible, no space</td><td>Still in tree</td><td>No — screen reader only</td></tr> <tr><td><code>inert</code></td><td>Visible (dimmed)</td><td>Removed from tree</td><td>Yes — declares non-interactivity</td></tr> </tbody></table> <p>Prefer <code>hidden</code> over <code>display: none</code> when the content is semantically irrelevant. Prefer <code>inert</code> when content should remain visible but non-interactive.</p> <section> <h2>See Also</h2> <ul> <li><a href="/docs/elements/native/dialog/"><code><dialog></code></a> — automatically manages inert on the rest of the page</li> <li><a href="/docs/elements/native/details/"><code><details></code></a> — native collapsible content</li> <li><a href="/docs/attributes/data-show-when/"><code>data-show-when</code></a> — conditional visibility based on form field values</li> <li><a href="/docs/attributes/class/">class: <code>.visually-hidden</code></a> — hide visually but keep accessible</li> </ul></section>