Thehidden attribute indicates that the content of an element should not be presented to the user.The attribute takes any one of the following values:

• the keywordhidden
• the keyworduntil-found
• an empty string or no value

Invalidhidden attribute values also place the element in thehidden state. Therefore, all the following elements are in thehidden state:

<span hidden>I'm hidden</span><span hidden="">I'm also hidden</span><span hidden="hidden">I'm hidden too!</span><span hidden="bananas">I'm equally as hidden!</span>

The keyworduntil-found sets the element to thehidden until found state:

<span hidden="until-found">I'm hidden until found</span>

Thehidden state indicates that the element is not currently relevant to the page, or that it is being used to declare content for reuse by other parts of the page and should not be directly presented to the user. The browser will not render elements that are in thehidden state.

Web browsers may implement thehidden state usingdisplay: none, in which case the element will not participate in page layout.Additionally, changing the value of the CSSdisplay property on a hidden element will override thehidden state.For instance, elements styleddisplay: block will be displayed despite thehidden attribute's presence.

In thehidden until found state, the element is hidden but its content will be accessible to the browser's "Find in page" feature or to fragment navigation.When these features cause a scroll to an element in ahidden until found subtree, the browser will:

1. Fire abeforematch event on the hidden element
2. Remove thehidden attribute from the element
3. Scroll to the element

This lets you collapse a section of content while still allowing users to find it through search or navigation.

Browsers typically implementhidden until found usingcontent-visibility: hidden.This means that, unlike elements in thehidden state, elements in thehidden until-found state generate boxes, and:

• they participate in page layout
• their margin, borders, padding, and background are rendered

Also, the element needs to be affected bylayout containment in order to be revealed.If the element in thehidden until found state has adisplay value ofnone,contents, orinline, then the element will not be revealed by "Find in page" or fragment navigation.

Thehidden attribute must not be used to hide content just from one presentation.If something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

Hidden elements shouldn't be linked from visible elements unless usinghidden="until-found".For example, it would be incorrect to use thehref attribute to link to a section with thehidden attribute.If the content is not applicable or relevant, it shouldn't be linked.

It is fine, however, to use the ARIAaria-describedby attribute to refer to hidden descriptions. While hiding the descriptions implies that they're not useful on their own, they can provide helpful context when referenced in this way.

Similarly, a canvas element with thehidden attribute could be used by a scripted graphics engine as an off-screen buffer, and a form control could refer to a hidden form element using its form attribute.

Finally, note that elements that are descendants of a hidden element are still active, which means that script elements can still execute, and form elements can still submit:

<div hidden>  <script>    console.warn("Boo! I'm hidden *and* running!");  </script></div>

In this example, we have three<div> elements. The first and the third are not hidden, while the second has ahidden attribute.Note that the hidden element has no generated box.

<div>I'm not hidden</div><div hidden>I'm hiding!</div><div>I'm not hidden, either</div>

div {  height: 40px;  width: 300px;  border: 5px dashed black;  margin: 1rem 0;  padding: 1rem;  font-size: 2rem;}

In this example, we have three<div> elements.The first and the third are visible, while the second has thehidden="until-found" andid="until-found-box" attributes.The element with auntil-found-box id has a dotted red border and a gray background.

We also have a link that targets the"until-found-box" fragment and JavaScript that listens for thebeforematch event firing on that hidden element.The event handler changes the text content of the box to illustrate an action that can occur when thehidden until found state is about to be removed.

HTML

<a href="#until-found-box">Go to hidden content</a><div>I'm not hidden</div><div hidden="until-found">Hidden until found</div><div>I'm hidden</div>

<button>Reset</button>

CSS

div {  height: 40px;  width: 300px;  border: 5px dashed black;  margin: 1rem 0;  padding: 1rem;  font-size: 2rem;}div#until-found-box {  color: red;  border: 5px dotted red;  background-color: lightgray;}

#until-found-box {  scroll-margin-top: 200px;}

JavaScript

const untilFound = document.querySelector("#until-found-box");untilFound.addEventListener(  "beforematch",  () => (untilFound.textContent = "I've been revealed!"),);

document.querySelector("#reset").addEventListener("click", () => {  document.location.hash = "";  document.location.reload();});

Result

Clicking the "Go to hidden content" link navigates to thehidden until found element. Thebeforematch event fires, the text content is updated, and the element becomes visible.Note that although the content of the element is hidden, the element still has a generated box, occupying space in the layout and with background and borders rendered.

To run the example again, click "Reset".

• HTMLElement.hidden
• Allglobal attributes
• Thearia-hidden attribute
• Thebeforematch event