The hidden Attribute

The `hidden` Attribute

Global Attribute

The hidden attribute indicates that an element is not yet, or is no longer, relevant. Hidden elements are removed from the rendering and the accessibility tree, making them completely invisible to both visual users and assistive technologies.

Syntax

<element hidden>Content</element>
<element hidden="hidden">Content</element>
<element hidden="until-found">Content</element>

Values

Value	Description
Boolean (no value)	Element is completely hidden
`"hidden"`	Same as boolean (explicitly hidden)
`"until-found"`	Hidden but findable with browser’s find-in-page

Examples

Basic Hidden Elements

<!DOCTYPE html>
<html>
<head>
<style>
  .container { padding: 20px; max-width: 600px; }
  .box {
    padding: 15px;
    margin: 10px 0;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
  }
  .visible { border-color: #10b981; background: #ecfdf5; }
  button {
    padding: 8px 16px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
  }
  button:hover { background: #2563eb; }
</style>
</head>
<body>
<div class="container">
  <h3>Hidden Attribute Demo</h3>

  <div class="box visible">
    <strong>Visible Element</strong>
    <p>This element is always visible.</p>
  </div>

  <div class="box" id="hiddenBox" hidden>
    <strong>Hidden Element</strong>
    <p>This element is hidden by default. You cannot see this text until the button is clicked.</p>
  </div>

  <button onclick="toggleVisibility()">Toggle Hidden Element</button>

  <div class="box visible" style="margin-top: 20px;">
    <strong>Note:</strong> The hidden element doesn't take up any space when hidden, unlike CSS visibility:hidden or opacity:0.
  </div>
</div>

<script>
  function toggleVisibility() {
    const box = document.getElementById('hiddenBox');
    if (box.hasAttribute('hidden')) {
      box.removeAttribute('hidden');
      box.classList.add('visible');
    } else {
      box.setAttribute('hidden', '');
      box.classList.remove('visible');
    }
  }
</script>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<style>
  .container { padding: 20px; max-width: 600px; }
  .box {
    padding: 15px;
    margin: 10px 0;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
  }
  .visible { border-color: #10b981; background: #ecfdf5; }
  button {
    padding: 8px 16px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
  }
  button:hover { background: #2563eb; }
</style>
</head>
<body>
<div class="container">
  <h3>Hidden Attribute Demo</h3>

  <div class="box visible">
    <strong>Visible Element</strong>
    <p>This element is always visible.</p>
  </div>

  <div class="box" id="hiddenBox" hidden>
    <strong>Hidden Element</strong>
    <p>This element is hidden by default. You cannot see this text until the button is clicked.</p>
  </div>

  <button onclick="toggleVisibility()">Toggle Hidden Element</button>

  <div class="box visible" style="margin-top: 20px;">
    <strong>Note:</strong> The hidden element doesn't take up any space when hidden, unlike CSS visibility:hidden or opacity:0.
  </div>
</div>

<script>
  function toggleVisibility() {
    const box = document.getElementById('hiddenBox');
    if (box.hasAttribute('hidden')) {
      box.removeAttribute('hidden');
      box.classList.add('visible');
    } else {
      box.setAttribute('hidden', '');
      box.classList.remove('visible');
    }
  }
</script>
</body>
</html>

Hidden Until Found (New Feature)

<!DOCTYPE html>
<html>
<head>
<style>
  .container { padding: 20px; max-width: 800px; }
  .info {
    background: #dbeafe;
    border: 2px solid #3b82f6;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
  }
  .section {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    background: white;
  }
  .section[hidden="until-found"] {
    background: #fef3c7;
    border-color: #f59e0b;
  }
  h3 { margin-top: 0; }
</style>
</head>
<body>
<div class="container">
  <div class="info">
    <strong>Try this:</strong> Press Ctrl+F (Cmd+F on Mac) and search for "quantum physics" or "machine learning". The hidden sections should automatically become visible!
  </div>

  <h2>Documentation Sections</h2>

  <div class="section">
    <h3>Introduction</h3>
    <p>This section is always visible. It introduces the topic and provides an overview.</p>
  </div>

  <div class="section" hidden="until-found">
    <h3>Advanced Topic: Quantum Physics</h3>
    <p>This section is hidden until found by the browser's find-in-page feature. It discusses quantum physics, quantum mechanics, and quantum computing in detail.</p>
    <p>When you search for "quantum physics", this section will automatically be revealed.</p>
  </div>

  <div class="section" hidden="until-found">
    <h3>Advanced Topic: Machine Learning</h3>
    <p>This section covers machine learning, neural networks, and artificial intelligence. It's hidden by default but can be revealed through search.</p>
    <p>Search for "machine learning" to make this section visible.</p>
  </div>

  <div class="section">
    <h3>Conclusion</h3>
    <p>This section is always visible and provides closing thoughts.</p>
  </div>

  <button onclick="revealAll()" style="padding: 10px 20px; margin-top: 20px;">
    Reveal All Hidden Sections
  </button>
</div>

<script>
  // Listen for beforematch event when content is revealed by find-in-page
  document.querySelectorAll('[hidden="until-found"]').forEach(section => {
    section.addEventListener('beforematch', () => {
      console.log('Section revealed by find-in-page:', section.querySelector('h3').textContent);
    });
  });

  function revealAll() {
    document.querySelectorAll('[hidden="until-found"]').forEach(section => {
      section.removeAttribute('hidden');
    });
  }
</script>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<style>
  .container { padding: 20px; max-width: 800px; }
  .info {
    background: #dbeafe;
    border: 2px solid #3b82f6;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
  }
  .section {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    background: white;
  }
  .section[hidden="until-found"] {
    background: #fef3c7;
    border-color: #f59e0b;
  }
  h3 { margin-top: 0; }
</style>
</head>
<body>
<div class="container">
  <div class="info">
    <strong>Try this:</strong> Press Ctrl+F (Cmd+F on Mac) and search for "quantum physics" or "machine learning". The hidden sections should automatically become visible!
  </div>

  <h2>Documentation Sections</h2>

  <div class="section">
    <h3>Introduction</h3>
    <p>This section is always visible. It introduces the topic and provides an overview.</p>
  </div>

  <div class="section" hidden="until-found">
    <h3>Advanced Topic: Quantum Physics</h3>
    <p>This section is hidden until found by the browser's find-in-page feature. It discusses quantum physics, quantum mechanics, and quantum computing in detail.</p>
    <p>When you search for "quantum physics", this section will automatically be revealed.</p>
  </div>

  <div class="section" hidden="until-found">
    <h3>Advanced Topic: Machine Learning</h3>
    <p>This section covers machine learning, neural networks, and artificial intelligence. It's hidden by default but can be revealed through search.</p>
    <p>Search for "machine learning" to make this section visible.</p>
  </div>

  <div class="section">
    <h3>Conclusion</h3>
    <p>This section is always visible and provides closing thoughts.</p>
  </div>

  <button onclick="revealAll()" style="padding: 10px 20px; margin-top: 20px;">
    Reveal All Hidden Sections
  </button>
</div>

<script>
  // Listen for beforematch event when content is revealed by find-in-page
  document.querySelectorAll('[hidden="until-found"]').forEach(section => {
    section.addEventListener('beforematch', () => {
      console.log('Section revealed by find-in-page:', section.querySelector('h3').textContent);
    });
  });

  function revealAll() {
    document.querySelectorAll('[hidden="until-found"]').forEach(section => {
      section.removeAttribute('hidden');
    });
  }
</script>
</body>
</html>

Hidden vs CSS Display

<!DOCTYPE html>
<html>
<head>
<style>
  .comparison {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 900px;
  }
  .method {
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    padding: 15px;
    background: #f8fafc;
  }
  .method h3 {
    margin-top: 0;
    color: #1e293b;
  }
  .box {
    padding: 15px;
    margin: 10px 0;
    background: #3b82f6;
    color: white;
    border-radius: 6px;
  }
  .hidden-attr[hidden] {
    /* Can be overridden by CSS */
  }
  .display-none {
    display: none;
  }
  .visibility-hidden {
    visibility: hidden;
  }
  .opacity-zero {
    opacity: 0;
  }
  .spacer {
    background: #fef3c7;
    padding: 10px;
    margin: 5px 0;
    text-align: center;
    font-size: 12px;
  }
</style>
</head>
<body>
<div class="comparison">
  <div class="method">
    <h3>1. hidden Attribute</h3>
    <div class="spacer">Content before</div>
    <div class="box hidden-attr" hidden>Hidden Element</div>
    <div class="spacer">Content after (no space gap)</div>
    <p><strong>Accessibility:</strong> Not in accessibility tree</p>
    <p><strong>Space:</strong> Takes no space</p>
  </div>

  <div class="method">
    <h3>2. CSS display: none</h3>
    <div class="spacer">Content before</div>
    <div class="box display-none">Hidden Element</div>
    <div class="spacer">Content after (no space gap)</div>
    <p><strong>Accessibility:</strong> Not in accessibility tree</p>
    <p><strong>Space:</strong> Takes no space</p>
  </div>

  <div class="method">
    <h3>3. CSS visibility: hidden</h3>
    <div class="spacer">Content before</div>
    <div class="box visibility-hidden">Hidden Element</div>
    <div class="spacer">Content after (space remains!)</div>
    <p><strong>Accessibility:</strong> Not in accessibility tree</p>
    <p><strong>Space:</strong> Takes up space</p>
  </div>

  <div class="method">
    <h3>4. CSS opacity: 0</h3>
    <div class="spacer">Content before</div>
    <div class="box opacity-zero">Hidden Element</div>
    <div class="spacer">Content after (space remains!)</div>
    <p><strong>Accessibility:</strong> Still in accessibility tree!</p>
    <p><strong>Space:</strong> Takes up space</p>
  </div>
</div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<style>
  .comparison {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 900px;
  }
  .method {
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    padding: 15px;
    background: #f8fafc;
  }
  .method h3 {
    margin-top: 0;
    color: #1e293b;
  }
  .box {
    padding: 15px;
    margin: 10px 0;
    background: #3b82f6;
    color: white;
    border-radius: 6px;
  }
  .hidden-attr[hidden] {
    /* Can be overridden by CSS */
  }
  .display-none {
    display: none;
  }
  .visibility-hidden {
    visibility: hidden;
  }
  .opacity-zero {
    opacity: 0;
  }
  .spacer {
    background: #fef3c7;
    padding: 10px;
    margin: 5px 0;
    text-align: center;
    font-size: 12px;
  }
</style>
</head>
<body>
<div class="comparison">
  <div class="method">
    <h3>1. hidden Attribute</h3>
    <div class="spacer">Content before</div>
    <div class="box hidden-attr" hidden>Hidden Element</div>
    <div class="spacer">Content after (no space gap)</div>
    <p><strong>Accessibility:</strong> Not in accessibility tree</p>
    <p><strong>Space:</strong> Takes no space</p>
  </div>

  <div class="method">
    <h3>2. CSS display: none</h3>
    <div class="spacer">Content before</div>
    <div class="box display-none">Hidden Element</div>
    <div class="spacer">Content after (no space gap)</div>
    <p><strong>Accessibility:</strong> Not in accessibility tree</p>
    <p><strong>Space:</strong> Takes no space</p>
  </div>

  <div class="method">
    <h3>3. CSS visibility: hidden</h3>
    <div class="spacer">Content before</div>
    <div class="box visibility-hidden">Hidden Element</div>
    <div class="spacer">Content after (space remains!)</div>
    <p><strong>Accessibility:</strong> Not in accessibility tree</p>
    <p><strong>Space:</strong> Takes up space</p>
  </div>

  <div class="method">
    <h3>4. CSS opacity: 0</h3>
    <div class="spacer">Content before</div>
    <div class="box opacity-zero">Hidden Element</div>
    <div class="spacer">Content after (space remains!)</div>
    <p><strong>Accessibility:</strong> Still in accessibility tree!</p>
    <p><strong>Space:</strong> Takes up space</p>
  </div>
</div>
</body>
</html>

Dynamic Show/Hide Pattern

<!DOCTYPE html>
<html>
<head>
<style>
  .app {
    max-width: 600px;
    margin: 20px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
  }
  .tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
  }
  .tab {
    padding: 10px 20px;
    background: #f1f5f9;
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-weight: bold;
  }
  .tab.active {
    background: #3b82f6;
    color: white;
  }
  .panel {
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    margin: 10px 0;
  }
  .error-message {
    background: #fee;
    border: 2px solid #fcc;
    padding: 15px;
    border-radius: 6px;
    color: #b91c1c;
  }
  .success-message {
    background: #ecfdf5;
    border: 2px solid #86efac;
    padding: 15px;
    border-radius: 6px;
    color: #166534;
  }
</style>
</head>
<body>
<div class="app">
  <h2>User Dashboard</h2>

  <div class="tabs">
    <button class="tab active" onclick="showTab('profile')">Profile</button>
    <button class="tab" onclick="showTab('settings')">Settings</button>
    <button class="tab" onclick="showTab('billing')">Billing</button>
  </div>

  <div id="profile" class="panel">
    <h3>Profile Information</h3>
    <p>Name: John Doe</p>
    <p>Email: john@example.com</p>
    <p>Member since: 2024</p>
  </div>

  <div id="settings" class="panel" hidden>
    <h3>Account Settings</h3>
    <p>Configure your preferences here.</p>
    <label>
      <input type="checkbox"> Email notifications
    </label>
  </div>

  <div id="billing" class="panel" hidden>
    <h3>Billing</h3>
    <p>Plan: Free</p>
    <button>Upgrade to Pro</button>
  </div>

  <div class="error-message" id="error" hidden>
    <strong>Error:</strong> Something went wrong!
  </div>

  <div class="success-message" id="success" hidden>
    <strong>Success:</strong> Changes saved!
  </div>

  <button onclick="showSuccess()">Show Success</button>
  <button onclick="showError()">Show Error</button>
</div>

<script>
  function showTab(tabId) {
    // Hide all panels
    document.querySelectorAll('.panel').forEach(panel => {
      panel.hidden = true;
    });

    // Remove active class from all tabs
    document.querySelectorAll('.tab').forEach(tab => {
      tab.classList.remove('active');
    });

    // Show selected panel
    document.getElementById(tabId).hidden = false;

    // Add active class to clicked tab
    event.target.classList.add('active');
  }

  function showSuccess() {
    const msg = document.getElementById('success');
    msg.hidden = false;
    setTimeout(() => msg.hidden = true, 3000);
  }

  function showError() {
    const msg = document.getElementById('error');
    msg.hidden = false;
    setTimeout(() => msg.hidden = true, 3000);
  }
</script>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html>
<head>
<style>
  .app {
    max-width: 600px;
    margin: 20px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
  }
  .tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
  }
  .tab {
    padding: 10px 20px;
    background: #f1f5f9;
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-weight: bold;
  }
  .tab.active {
    background: #3b82f6;
    color: white;
  }
  .panel {
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    margin: 10px 0;
  }
  .error-message {
    background: #fee;
    border: 2px solid #fcc;
    padding: 15px;
    border-radius: 6px;
    color: #b91c1c;
  }
  .success-message {
    background: #ecfdf5;
    border: 2px solid #86efac;
    padding: 15px;
    border-radius: 6px;
    color: #166534;
  }
</style>
</head>
<body>
<div class="app">
  <h2>User Dashboard</h2>

  <div class="tabs">
    <button class="tab active" onclick="showTab('profile')">Profile</button>
    <button class="tab" onclick="showTab('settings')">Settings</button>
    <button class="tab" onclick="showTab('billing')">Billing</button>
  </div>

  <div id="profile" class="panel">
    <h3>Profile Information</h3>
    <p>Name: John Doe</p>
    <p>Email: john@example.com</p>
    <p>Member since: 2024</p>
  </div>

  <div id="settings" class="panel" hidden>
    <h3>Account Settings</h3>
    <p>Configure your preferences here.</p>
    <label>
      <input type="checkbox"> Email notifications
    </label>
  </div>

  <div id="billing" class="panel" hidden>
    <h3>Billing</h3>
    <p>Plan: Free</p>
    <button>Upgrade to Pro</button>
  </div>

  <div class="error-message" id="error" hidden>
    <strong>Error:</strong> Something went wrong!
  </div>

  <div class="success-message" id="success" hidden>
    <strong>Success:</strong> Changes saved!
  </div>

  <button onclick="showSuccess()">Show Success</button>
  <button onclick="showError()">Show Error</button>
</div>

<script>
  function showTab(tabId) {
    // Hide all panels
    document.querySelectorAll('.panel').forEach(panel => {
      panel.hidden = true;
    });

    // Remove active class from all tabs
    document.querySelectorAll('.tab').forEach(tab => {
      tab.classList.remove('active');
    });

    // Show selected panel
    document.getElementById(tabId).hidden = false;

    // Add active class to clicked tab
    event.target.classList.add('active');
  }

  function showSuccess() {
    const msg = document.getElementById('success');
    msg.hidden = false;
    setTimeout(() => msg.hidden = true, 3000);
  }

  function showError() {
    const msg = document.getElementById('error');
    msg.hidden = false;
    setTimeout(() => msg.hidden = true, 3000);
  }
</script>
</body>
</html>

How It Works

HTML Behavior

The hidden attribute is implemented in browsers as:

[hidden] {
  display: none !important;
}

This means:

Element is not rendered
Takes no space in layout
Not in accessibility tree
Can be overridden by CSS with higher specificity

Semantic Meaning

hidden indicates irrelevance, not just invisibility:

<!-- Good: Content not currently relevant -->
<div hidden>
  <p>This feature is not available in your region.</p>
</div>

<!-- Bad: Just styling (use CSS instead) -->
<div hidden>
  <p>Fancy animation that will show later</p>
</div>

hidden vs CSS Display

When to Use `hidden` Attribute

✓ Semantic hiding: Content is irrelevant to current context ✓ Programmatic control: Show/hide based on application state ✓ Accessibility: Remove from accessibility tree ✓ Progressive enhancement: Works without CSS

<article>
  <h2>Article Title</h2>
  <p>Preview text...</p>
  <div hidden>
    <p>Full article content that requires login...</p>
  </div>
</article>

When to Use CSS `display: none`

✓ Styling decisions: Responsive design, animations ✓ Reusable classes: .hidden, .mobile-only ✓ Complex selectors: :hover, :focus, media queries

/* Responsive hiding */
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
}

/* Interactive hiding */
.dropdown-menu {
  display: none;
}
.dropdown:hover .dropdown-menu {
  display: block;
}

The `until-found` Value

How until-found Works

Content is hidden initially
User searches with Ctrl+F (Cmd+F)
Browser finds matching text
Element is automatically revealed
beforematch event is fired

<div hidden="until-found">
  <h2>Secret Section</h2>
  <p>This content is hidden but searchable!</p>
</div>

<script>
  document.querySelector('[hidden="until-found"]')
    .addEventListener('beforematch', (e) => {
      console.log('Content revealed by search!');
      // You can style the revealed content
      e.target.style.borderColor = '#3b82f6';
    });
</script>

Use Cases for until-found

Long documentation: Hide advanced sections
FAQ pages: Initially collapse answers
Search-optimized content: Allow users to find hidden content
Progressive disclosure: Show content when needed

Best Practices

1. Use for Semantic Hiding

<!-- Good: Indicates irrelevance -->
<div hidden>
  <p>This feature requires Premium subscription</p>
</div>

<!-- Bad: Just for styling -->
<div hidden class="will-animate-in">
  <p>Welcome message</p>
</div>

2. Don’t Rely on hidden for Security

<!-- DON'T DO THIS -->
<div hidden>
  <p>Admin API Key: sk_live_abc123...</p>
</div>

3. Combine with ARIA for Accessibility

<button
  aria-expanded="false"
  aria-controls="details"
  onclick="toggle()">
  Show Details
</button>

<div id="details" hidden>
  <p>Additional information...</p>
</div>

<script>
  function toggle() {
    const details = document.getElementById('details');
    const button = event.target;
    const isHidden = details.hasAttribute('hidden');

    if (isHidden) {
      details.removeAttribute('hidden');
      button.setAttribute('aria-expanded', 'true');
    } else {
      details.hidden = true;
      button.setAttribute('aria-expanded', 'false');
    }
  }
</script>

4. Prefer hidden Over display: none for Conditional Content

// Good: Semantic and clear
if (user.isLoggedIn) {
  loginButton.hidden = true;
  logoutButton.hidden = false;
}

// Also good: CSS classes
if (user.isLoggedIn) {
  loginButton.classList.add('hidden');
  logoutButton.classList.remove('hidden');
}

5. Test Accessibility

Hidden elements should not be:

Focusable with keyboard
Announced by screen readers
Navigable with Tab key

// Verify element is truly hidden
const el = document.getElementById('hidden-element');
console.log(el.hidden); // true
console.log(getComputedStyle(el).display); // "none"

JavaScript API

Setting and Removing

const element = document.getElementById('myElement');

// Set hidden
element.hidden = true;
element.setAttribute('hidden', '');
element.toggleAttribute('hidden');

// Remove hidden
element.hidden = false;
element.removeAttribute('hidden');

// Check if hidden
if (element.hidden) {
  console.log('Element is hidden');
}

until-found with JavaScript

// Set until-found
element.setAttribute('hidden', 'until-found');

// Listen for reveal
element.addEventListener('beforematch', (event) => {
  console.log('Element revealed!');
  // Element is automatically shown by browser
});

Accessibility Considerations

Screen Readers

Hidden elements are:

Not announced by screen readers
Not in the accessibility tree
Not navigable with screen reader shortcuts

<!-- Not accessible to screen readers -->
<div hidden>
  <button>Click me</button>
</div>

Alternative Accessibility Hiding

If you need to hide visually but keep accessible:

/* Visually hidden but screen reader accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

<button>
  <span class="sr-only">Close dialog</span>
  <span aria-hidden="true">×</span>
</button>

Common Pitfalls

Browser Support

Feature	Chrome	Firefox	Safari	Edge
`hidden` (boolean)	6+	4+	5.1+	12+
`hidden="until-found"`	102+	🚫	🚫	102+
`beforematch` event	102+	🚫	🚫	102+

aria-hidden - Hide from screen readers only (element still visible)
inert - Make element non-interactive but visible
aria-expanded - Indicate if controlled content is expanded

The hidden Attribute

The hidden Attribute

Syntax

Values

Examples

Basic Hidden Elements

Hidden Until Found (New Feature)

Hidden vs CSS Display

Dynamic Show/Hide Pattern

How It Works

HTML Behavior

Semantic Meaning

hidden vs CSS Display

When to Use hidden Attribute

When to Use CSS display: none

The until-found Value

How until-found Works

Use Cases for until-found

Best Practices

1. Use for Semantic Hiding

2. Don’t Rely on hidden for Security

3. Combine with ARIA for Accessibility

4. Prefer hidden Over display: none for Conditional Content

5. Test Accessibility

JavaScript API

Setting and Removing

until-found with JavaScript

Accessibility Considerations

Screen Readers

Alternative Accessibility Hiding

Common Pitfalls

Browser Support

Related Attributes

Specifications

The `hidden` Attribute

When to Use `hidden` Attribute

When to Use CSS `display: none`

The `until-found` Value