HTML & CSS reference

inert

Makes part of the page inactive: it cannot be clicked, reached with Tab or selected.

Syntax

<main inert>…</main>

Examples

The block is visible but does not respond:

<style>
  [inert] { opacity: 0.5; }
</style>
 
<div inert>
  <button>Can't click me</button>
  <a href="#">Can't follow me</a>
</div>
<button>But I work</button>

Notes

Handy when a side panel or a custom modal is open: make the rest of the page inert so focus cannot escape behind it. A built-in <dialog> opened with showModal() does this by itself. The attribute does not change the look — dim the block in CSS.

Related recipes

How to make an element non-clickable

In the tutorial

Accessibility — How to make a page usable for everyone — keyboard use, focus, labels and alt, aria-label, contrast and meaningful tags.

Thanks for reading!