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
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>
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
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
<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.
There are some things you should know when using this attribute, as explained in the spec:
- You should not use
hiddento hide content that is supposed to be accessible on a different sized screen, resolution, etc.
- You should not use
hiddento 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
hiddenare 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
hiddenattribute (along with CSS
display:nonefor browsers that do not yet support
hidden). There is no need to use
Can You Reverse a Hidden Element with CSS?
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
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:
<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.
hidden attribute is supported in all modern browsers and even has support in IE11, so it’s safe to use in most projects.