HTML Academy · Lesson

The hidden Attribute

Toggle element visibility with the hidden boolean attribute.

The hidden Attribute is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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', '');

hidden vs display:none vs visibility:hidden

Three ways to hide elements:

/* hidden attribute = display:none */
/* Element is removed from flow, invisible to AT */

/* visibility: hidden */
/* Element occupies space but is invisible */
/* Still read by some screen readers */

/* opacity: 0 */
/* Element occupies space, invisible, still interactive */
/* Still read by screen readers */

/* Hidden attribute is the simplest for fully hiding content */

Toggling Visibility with JavaScript

Control visibility by adding/removing the hidden attribute:

const modal = document.getElementById('modal');

// Show:
modal.removeAttribute('hidden');
// or:
modal.hidden = false;

// Hide:
modal.setAttribute('hidden', '');
// or:
modal.hidden = true;

// Toggle:
modal.toggleAttribute('hidden');

CSS Can Override hidden

CSS display can override the hidden attribute — be careful:

/* This makes hidden elements visible again: */
[hidden] {
  display: block !important;
}

/* Do not do this unless you have a very specific reason */

/* The hidden attribute should be trusted as the source of truth for visibility */

hidden vs aria-hidden

Two different types of hiding:

hidden — visually hidden AND removed from accessibility tree
aria-hidden="true" — only hidden from accessibility tree, still renders visually

<!-- hidden: nothing sees it -->
<div hidden>Completely hidden</div>

<!-- aria-hidden: visual users see it, screen readers skip it -->
<span aria-hidden="true">★★★★☆</span>
<span class="sr-only">4 out of 5 stars</span>

Show/Hide Pattern

Classic show/hide toggle with hidden:

<button
  aria-expanded="false"
  aria-controls="menu"
  id="menu-btn"
>Menu</button>

<ul id="menu" hidden>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
</ul>

<script>
document.getElementById('menu-btn').addEventListener('click', function() {
  const menu = document.getElementById('menu');
  const expanded = this.getAttribute('aria-expanded') === 'true';
  menu.hidden = expanded;
  this.setAttribute('aria-expanded', !expanded);
});
</script>

until-found Value (New)

HTML 5.1+ introduced hidden="until-found" for searchable but collapsed content:

<details>
  <summary>Read More</summary>
  <div hidden="until-found" id="more-content">
    <p>This content is collapsed but findable by Ctrl+F.</p>
  </div>
</details>
<!-- hidden="until-found" hides visually but allows browser Ctrl+F to find and reveal it -->
<!-- Only supported in Chromium-based browsers currently -->

Screenreader Behavior

The hidden attribute completely hides content from assistive technology:

Screen readers skip hidden elements
Tab focus does not enter hidden elements
This is correct for modals, off-canvas menus, and conditional panels that should not be traversed when hidden

Common Use Cases

When to use the hidden attribute:

Modal dialogs before they are opened
Tab panel content (show the active tab's panel, hide others)
Step-based wizards (show the current step)
Progressive disclosure (reveal more info on click)
Loading states (replace loading spinner with content)

Persisting Hidden State

Use localStorage to remember visibility state across page loads:

const panel = document.getElementById('info-panel');
const key = 'info-panel-visible';

// Restore state:
if (localStorage.getItem(key) === 'false') {
  panel.hidden = true;
}

// On toggle:
document.getElementById('toggle-btn').addEventListener('click', () => {
  panel.hidden = !panel.hidden;
  localStorage.setItem(key, !panel.hidden);
});

Quick Check

What is the difference between the hidden attribute and aria-hidden?

Recap: hidden Attribute

Hidden attribute essentials:

hidden — equivalent to display: none
Boolean: presence = hidden, absence = visible
Removed from accessibility tree (unlike visibility: hidden)
Toggle with element.hidden = true/false
aria-hidden="true" hides from AT only, keeps visual rendering

Frequently asked questions

Is the “The hidden Attribute” lesson free?

Yes — the full text of “The hidden Attribute” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “The hidden Attribute”?

Toggle element visibility with the hidden boolean attribute. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The hidden Attribute” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy