hidden #

::: section-content The hidden global attribute is an enumerated attribute indicating that the browser should not render the contents of the element. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: hidden #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

This content should be read right now, as it is important. I am so glad you are able to find it!

<p hidden>This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} p { background: #ffe8d4; border: 1px solid #f69d3c; padding: 5px; border-radius: 5px; } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Description #

::: section-content The hidden attribute is used to indicate that the content of an element should not be presented to the user. This attribute can take any one of the following values:

an empty string
the keyword hidden
the keyword until-found

There are two states associated with the hidden attribute: the hidden state and the hidden until found state.

An empty string, or the keyword hidden, set the element to the hidden state. Additionally, invalid values set the element to the hidden state.
The keyword until-found sets the element to the hidden until found state.

Thus, all the following set the element to the hidden state:

::: code-example [html]{.language-name}

<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>

:::

The following sets the element to the hidden until found state:

::: code-example [html]{.language-name}

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

:::

The hidden 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 non-hidden elements. For example, it would be incorrect to use the href attribute to link to a section marked with the hidden attribute. If the content is not applicable or relevant, then there is no reason to link to it.

It would be fine, however, to use the ARIA aria-describedby attribute to refer to descriptions that are themselves hidden. While hiding the descriptions implies that they are not useful on their own, they could be written in such a way that they are useful in the specific context of being referenced from the element that they describe.

Similarly, a canvas element with the hidden 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.

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. :::

The hidden state #

::: section-content The hidden 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 the hidden state.

Web browsers may implement the hidden state using display: none, in which case the element will not participate in page layout. This also means that changing the value of the CSS display property on an element in the hidden state will override the state. For instance, elements styled display: block will be displayed despite the hidden attribute's presence. :::

The hidden until found state #

::: section-content In the hidden 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 a hidden until found subtree, the browser will:

fire a beforematch event on the hidden element
remove the hidden attribute from the element
scroll to the element

This enables a developer to collapse a section of content, but make it searchable and accessible via fragment navigation.

Note that browsers typically implement hidden until found using content-visibility: hidden. This means that unlike elements in the hidden state, elements in the hidden until found state will have generated boxes, meaning that:

the element will participate in page layout
margin, borders, padding, and background for the element will be rendered.

Also, the element needs to be affected by layout containment in order to be revealed. This means that if the element in the hidden until found state has a display value of none, contents, or inline, then the element will not be revealed by find in page or fragment navigation. :::

Examples #

Using until-found #

::: section-content In this example we have:

Three `` elements. The first and the third are not hidden, while the second has hidden="until-found"and id="until-found-box" attributes.
A link whose target is the "until-found-box" fragment.

The hidden until found element has a dotted red border and a gray background.

We also have some JavaScript that listens for the beforematch event firing on the hidden until found element. The event handler changes the text content of the box.

HTML #

::: code-example [html]{.language-name}

<a href="#until-found-box">Go to hidden content</a>

I'm not hidden
<div id="until-found-box" hidden="until-found">Hidden until found
I'm not hidden

:::

CSS #

::: code-example [css]{.language-name}

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;
}

:::

JavaScript #

::: code-example [js]{.language-name}

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

:::

Result #

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.

Clicking the "Go to hidden content" button navigates to the hidden until found element. The beforematch event fires, the text content is updated, and the element content is displayed.

To run the example again, click "Reset".

::: {#sect1 .code-example} ::: iframe ::: ::: :::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-hidden-attribute]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

                    Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

hidden 10 12 4 11 15 5.1 4 18 4 14 5 1.0 until-found_value 102 102 No No No No 102 102 No 70 No 19.0 :::

hidden #

Try it #

HTML Demo: hidden #

Output #

Console Output #

Description #

The hidden state #

The hidden until found state #

Examples #

Using until-found #

HTML #

CSS #

JavaScript #

Result #

Specifications #

::: _table #

Specification #

Browser compatibility #

See also #