0Pricing
HTML Academy · Lesson

The hidden Attribute

Toggle element visibility with the hidden boolean attribute.

What Is hidden?

The hidden attribute makes an element invisible and removes it from the accessibility tree:

<p hidden>This paragraph is hidden.</p>
<!-- Equivalent to: display: none in CSS -->
<!-- The element is in the DOM but not rendered -->
<!-- Screen readers do not announce hidden elements -->

hidden Is a Boolean Attribute

Boolean attributes are either present (true) or absent (false) — no value needed:

<!-- All of these are equivalent: -->
<div hidden>Content</div>
<div hidden="">Content</div>
<div hidden="hidden">Content</div>

<!-- Remove with JavaScript: -->
element.removeAttribute('hidden');

<!-- Or set: -->
element.setAttribute('hidden', '');

All lessons in this course

  1. id class style and title
  2. The hidden Attribute
  3. tabindex and accesskey
  4. Custom Data Attributes data-*
← Back to HTML Academy