HTML hidden Attribute

HTML hidden Attribute

The HTML hidden global attribute indicates that an element's content is not currently relevant and should not normally be presented to the user. It can be used on any HTML element.

Syntax

The hidden attribute can be added to any HTML element to indicate that the element should not currently be presented to the user.

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

The attribute can also use the until-found value, which keeps the element hidden while allowing its content to be discovered through browser find-in-page and fragment navigation.

<section hidden="until-found">
  <p>This content can be revealed when found.</p>
</section>

Attribute Values

The hidden attribute is an enumerated attribute with two defined keywords. An empty value also places the element in the Hidden state.

If the attribute is omitted, the element is not hidden by the hidden attribute.

Elements That Use the hidden Attribute

The hidden attribute is a global attribute and can be specified on any HTML element.

<div hidden>Hidden content</div>

<p hidden>Hidden paragraph</p>

<section hidden>Hidden section</section>

Whether it is appropriate to hide an element depends on the purpose of the content rather than the type of HTML element being used.

Using the hidden Attribute

The Hidden state is useful for content that is not currently relevant to the page's state or that should remain unavailable until the page changes.

<div hidden>
  <h2>Order Complete</h2>
  <p>Thank you for your order.</p>
</div>

The browser does not normally render an element in the Hidden state. A script can later remove the attribute when the content becomes relevant.

<div id="message" hidden>
  <p>The hidden content is now visible.</p>
</div>

The hidden attribute affects presentation, but it does not deactivate everything inside the hidden content. For example, scripts can still execute and form controls can still participate in form submission.

Using hidden="until-found"

The until-found value provides a special Hidden Until Found state. The element is initially hidden, but text within it remains available to browser find-in-page and fragment navigation.

<section id="plant-care" hidden="until-found">
  <h2>Plant Care</h2>
  <p>Water tomato plants regularly and keep the soil evenly moist.</p>
</section>

If a browser's find-in-page feature locates matching content inside the section, or navigation targets content within it, a supporting browser can remove the hidden attribute and reveal the content.

The Hidden Until Found state behaves differently from the regular Hidden state. Supporting browsers generally use content-visibility: hidden for hidden="until-found", so the element can retain a generated box and its borders, margins, and padding may still affect the page layout.

hidden and CSS

The regular Hidden state is normally implemented by browsers in a way similar to display: none. Author CSS can override that behavior, so care should be taken when writing rules that change the display property of hidden elements.

<div hidden>This content should be hidden.</div>

div {
  display: block;
}

A CSS rule such as this can cause an element with the regular hidden attribute to be displayed. Avoid broad CSS rules that unintentionally override the intended hidden state.

For hidden="until-found", changing properties such as display or content-visibility can also interfere with the browser's ability to reveal the content when it is found.

Accessibility Considerations

Use hidden for content that is genuinely not relevant in the page's current state. Content in the regular Hidden state is not intended to be presented in other forms of the page, including to assistive technologies.

Do not use hidden merely to make meaningful content visually disappear while expecting it to remain available to screen reader users. If the content should remain available in another presentation, a different technique should be used.

A visible hyperlink should also not normally point to content in the regular Hidden state because the destination is not available to the user.

Common Mistakes

Do not confuse the global hidden attribute with <input type="hidden">. They serve different purposes.

<!-- Global hidden attribute -->
<p hidden>This paragraph is not currently displayed.</p>

<!-- Hidden form control -->
<input type="hidden" name="product-id" value="123">

Do not assume that hidden="false" makes an element visible. An unrecognized value places the attribute in the Hidden state, so the element remains hidden.

<!-- Still hidden -->
<p hidden="false">This paragraph is hidden.</p>

<!-- Not hidden by the hidden attribute -->
<p>This paragraph is visible.</p>

To return an element to its normal visible state, remove the hidden attribute rather than assigning it a value of false.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The basic hidden attribute is widely supported in current core browsers. The newer until-found value has a different compatibility history and should be checked separately before relying on it.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the hidden Attribute

The example contains one visible paragraph and another paragraph with the hidden attribute. Remove hidden in the editor to display the second paragraph.

Summary

The HTML hidden global attribute indicates that an element is not currently relevant and should not normally be presented to the user. The regular Hidden state prevents the element from being rendered, while hidden="until-found" allows hidden content to remain discoverable through supporting browser find-in-page and fragment-navigation features. To make a normally hidden element visible again, remove the hidden attribute rather than setting it to false.