HTML hidden Attribute

What You’ll Learn

The hidden attribute is a boolean global attribute that hides an element from view. When present, the browser does not display the element—though it remains in the DOM. Use it for content that is not currently relevant, toggle it with JavaScript, and remove it when content should become visible and accessible again.

Purpose of hidden Attribute

The hidden attribute tells the browser that an element is not currently relevant and should not be shown. It is a boolean global attribute, which means it can appear on almost any HTML element. You do not need to assign a value—simply include hidden or hidden="" and the element is hidden.

Browsers hide elements with this attribute through user agent styles (effectively display: none). The content stays in the document tree, so you can reveal it later by removing the attribute or setting element.hidden = false in JavaScript. This makes hidden ideal for panels, optional form sections, and UI that appears only after user action.

📝 Syntax

Add hidden to any element where content should not be displayed:

<!-- Boolean: presence hides the element -->
<p>This paragraph is visible.</p>
<div hidden>
  <p>This block is hidden until you remove the attribute.</p>
</div>

<!-- Equivalent empty string value -->
<section hidden="">Not shown</section>

<!-- Wrong: hidden="false" STILL hides the element -->
<div hidden="false">Still hidden!</div>

Syntax Rules

• hidden is a boolean global attribute—valid on nearly all HTML elements.
• Presence means hidden; no value is required. Use hidden or hidden="".
• hidden="false" does not show the element—boolean attributes are presence-based. Remove the attribute to show content.
• To show hidden content with JavaScript, set element.hidden = false or call removeAttribute("hidden").
• Do not confuse with <input type="hidden">, which is a form data control, not a visibility attribute.
• Prefer removing hidden when content becomes relevant rather than overriding with CSS alone.

💎 Values

As a boolean attribute, hidden has no meaningful value—only presence or absence matters:

• hidden — Element is hidden. Most common form.
• hidden="" — Also hides the element. Empty string is equivalent to presence.
• Attribute absent — Element is visible (unless other CSS or attributes hide it).
• hidden="false" — Still hidden. The attribute is present, so the element remains hidden. Remove the attribute or use JavaScript to show it.

<!-- Hidden: attribute present -->
<div hidden>Not visible</div>

<!-- Visible: no hidden attribute -->
<div>Visible</div>

<!-- JavaScript: show and hide -->
<script>
  var panel = document.getElementById("panel");
  panel.hidden = true;                    // hide
  panel.hidden = false;                   // show
  panel.removeAttribute("hidden");        // show
  panel.setAttribute("hidden", "");       // hide
</script>

Applicable Elements

hidden vs type="hidden" vs CSS display:none vs aria-hidden

Examples Gallery

Basic hidden markup, toggling visibility with JavaScript, and revealing optional form fields with a checkbox.

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

<div hidden>
  <p>This block is hidden by default because of the <code>hidden</code> attribute.</p>
</div>

<button type="button" id="toggleBtn">Toggle visibility</button>

<div id="toggleElement">
  <p>This panel can be shown or hidden with the button.</p>
</div>

<script>
  document.getElementById("toggleBtn").addEventListener("click", function () {
    var el = document.getElementById("toggleElement");
    el.hidden = !el.hidden;
  });
</script>

<form action="#">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label>
    <input type="checkbox" id="shipToggle">
    Add shipping address
  </label>

  <div id="addressPanel" hidden>
    <label for="street">Street:</label>
    <input type="text" id="street" name="street">
  </div>
</form>

<script>
  var toggle = document.getElementById("shipToggle");
  var panel = document.getElementById("addressPanel");
  toggle.addEventListener("change", function () {
    panel.hidden = !toggle.checked;
  });
</script>

♿ Accessibility

• Hidden content is not accessible while hidden — When hidden is present, content is not shown to users and is removed from the accessibility tree. Do not assume hidden content remains available to assistive technology.
• Remove hidden when revealing content — To make content available again, remove the attribute or set element.hidden = false so screen readers and keyboard users can reach it.
• Do not use hidden on focusable controls users need — Hiding required form fields or primary actions blocks interaction entirely.
• aria-hidden is different — Use aria-hidden="true" to hide decorative visible content from assistive tech, not to hide content from everyone.
• Prefer semantic hidden over CSS-only hiding — Signals that content is inactive, not merely styled away.
• Test with keyboard and screen reader — Verify that toggling visibility updates what users can tab to and hear announced.

💡 Best Practices