HTML5’s Global `hidden` Attribute

As you probably know, there are a number of HTML attributes that are considered global because they can be applied to any HTML element. Common examples include class, id, style, and tabindex.

One that was added a number of years ago in HTML5, and you may have forgotten about, is used on two elements in the following code:

<p hidden>Example text. Nothing to see here.</p>

<textarea hidden>More example text.</textarea>

The hidden attribute is a Boolean that, when specified on an element:

indicates that the element is not yet, or is no longer, directly relevant to the page’s current state, or that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user.

Below is a demo that uses this attribute. Use the button to toggle the hidden value on the affected elements. Note that JavaScript isn’t necessary to use this attribute; I’m merely including some scripting to toggle it on and off, to demonstrate its function.

See the Pen HTML5’s Global `hidden` Attribute by Louis Lazaris (@impressivewebs) on CodePen.

How is this Attribute Useful?

The latter part of the definition in the spec is interesting because this indicates that you can place content in a page using the hidden attribute, then access that content via JavaScript for use elsewhere. I’ve done this before using a hidden <textarea> element, for example, but I would normally hide the element with CSS using something like display: none. The hidden attribute makes this easier. Thus, an element with the hidden attribute is part of the DOM but is not accessible to the user.

Here’s an example where I’m grabbing the innerHTML content of the hidden element with JavaScript:

See the Pen Accessing a `hidden` element with JavaScript by Louis Lazaris (@impressivewebs) on CodePen.

There are some things you should know when using this attribute, as explained in the spec:

• You should not use hidden to hide content that is supposed to be accessible on a different sized screen, resolution, etc.
• You should not use hidden to hide the non-visible parts of a tab component or similar content switcher (Edit: This advice, which comes from the spec, is in dispute. See this thread for details)
• Non-hidden elements should not hyperlink to hidden elements
• Elements marked up with hidden are still potentially active. For example, a form control or even a <script> element would still be functional.

The spec provides a number of details on valid use, and this attribute is fully supported in browsers for accessibility mappings. It maps to aria-hidden="true", but it behaves differently from aria-hidden="true". In this article, Steve Faulkner explains many of the differences. The most notable, of course, is the fact that elements with aria-hidden="true" are still visible in the browser, but will not display for assistive technology – whereas elements with hidden are not accessible anywhere.

In that article, Faulkner also explains how to use the hidden attribute correctly:

If you want to hide content from all users, use the HTML5 hidden attribute (along with CSS display:none for browsers that do not yet support hidden). There is no need to use aria-hidden.

Can You Reverse a Hidden Element with CSS?

<

p>The simple answer is yes, you can use CSS to visibly display an element that has the hidden attribute present. When you inspect a hidden element in your browser’s developer tools, you’ll notice that the browser gives the element a CSS value of display: none:

As you can see the browser uses the attribute selector to target the element. So, in order to override this, you have to ensure you use a selector that’s stronger in specificity. In the following demo, I’m attempting to override hidden using CSS on two elements. One works and the other doesn’t:

See the Pen Overriding the `hidden` Attribute with CSS by Louis Lazaris (@impressivewebs) on CodePen.

The <textarea> element is still hidden because the element type selector is not strong enough to override the browser’s CSS. The paragraph element, however, is displayed because I’m using a class selector, which overrides the browser’s attribute selector.

The hidden attribute is supported in all modern browsers and even has support in IE11, so it’s safe to use in most projects.