HTML hidden and inert: remove inactive content from interaction deliberately

Last updated: 5 Oct 20266 min read

tutorial

hidden makes content unavailable for rendering; inert prevents user interaction and focus within a subtree.

Use it for a real task

A future receipt panel starts hidden, while a separate sample region is visible but inert during a temporary state. The attributes solve different tasks. Inert text is still present in the document source and cannot conceal a secret or enforce a permission boundary.

<section hidden aria-labelledby="future-heading">
  <h2 id="future-heading">Future receipt settings</h2>
  <p>Available after the next release.</p>
</section>
<section inert aria-labelledby="preview-heading">
  <h2 id="preview-heading">Read-only preview</h2>
  <button type="button">Approve receipt</button>
</section>

What the markup guarantees

A real state transition must add or remove these attributes when the interface changes. If the preview is meant to be readable and focusable, inert is the wrong choice; use a noninteractive description instead.

Cost and limits

These are native browser features with no library cost. The bigger cost is state consistency: hidden or inert content that never becomes available leaves a dead path in the product.

Common Mistakes

Do not use hidden or inert to protect confidential data.
Do not place the only error message inside a hidden subtree.
A disabled button and an inert region have different scopes.

Connected lessons

html

accessibility