References

Beginner-friendly references for web development, with live, editable examples.

The HTML hidden attribute

Global attribute Works on every element All modern browsers Updated
Quick answer

The HTML hidden attribute hides an element: it is not rendered and is removed from the accessibility tree. It is a boolean global attribute (<div hidden>). The modern hidden="until-found" value keeps the content findable by in-page search and "scroll to text", revealing it automatically when matched.

Overview

Adding hidden to an element hides it completely — it is not displayed, not focusable, and not exposed to assistive technology. Use it for content that is not currently relevant, then remove it (in markup or via the .hidden property in JavaScript) when the content should appear.

One caveat: hidden is the equivalent of CSS display: none, and a CSS display rule can override it — so an element with hidden can still be shown if a stylesheet sets display: block. The newer hidden="until-found" value (a "hidden until found" state) keeps the element out of view but still discoverable by the browser's find-in-page and "scroll to text fragment", which then reveals it — handy for collapsible FAQs and long pages.

Syntax

<p hidden>This paragraph is hidden.</p>

<!-- Revealed automatically by find-in-page -->
<section hidden="until-found">Searchable, hidden content</section>

Values

Value
hidden (boolean) — or the value "until-found".

Example

Live example 
<p>This paragraph is visible.</p>
<p hidden>This one has the hidden attribute and will not appear.</p>

Best practices

  • Use hidden for content that is not relevant right now, and toggle it with the .hidden property in JavaScript.
  • Remember a CSS display rule can override hidden — do not rely on it alone if your CSS also sets display.
  • Prefer hidden="until-found" for collapsible content you still want users to be able to search for.
  • Do not use hidden as a security measure — the content is still present in the DOM.

Accessibility

A hidden element is correctly removed from the accessibility tree, so screen readers ignore it — which is exactly what you want for irrelevant content. Two things to watch:

  • Do not reference a hidden element from aria-labelledby/aria-describedby expecting it to be announced normally.
  • Use hidden="until-found" when the content should remain discoverable by find-in-page.

Frequently asked questions

What does the hidden attribute do?
It hides the element from rendering and from the accessibility tree, similar to CSS display: none.
hidden vs display:none vs visibility:hidden?
hidden and display:none both remove the element from layout and the accessibility tree; visibility:hidden hides it but still reserves its space.
Can CSS override the hidden attribute?
Yes. Because hidden works through display:none, a CSS rule that sets display to anything else will make the element visible again.
What is hidden="until-found"?
A value that keeps content hidden but findable — the browser's in-page search and scroll-to-text can reveal it automatically, which is great for collapsible sections.
exportparts id