Description
Using the hidden attribute (set to “true”), it is possible to hide any visual element that may otherwise appear with the embedded content. Typically it may be used for audio content whereby not including the attribute would result in the transport controls (play, pause, etc) being visible underneath the audio.
Example
The hidden attribute set to "true" to hide the transport control on some audio:
<embed src="Crash.wav" hidden="true"></embed>
Value
“true” or “false” only.
Frequently Asked Questions about the Hidden HTML Attribute
What is the purpose of the hidden HTML attribute?
The hidden HTML attribute is a global attribute in HTML5 that is used to hide elements on a webpage from rendering. It’s a boolean attribute, meaning it can either be present or absent. When present, it indicates that the element it is applied to should not be displayed on the webpage. This attribute is often used for elements that should not be seen by the user, but still need to be present in the HTML code for other purposes, such as scripting or data storage.
How does the hidden attribute differ from CSS display:none?
While both the hidden attribute and CSS display:none property can hide elements on a webpage, they function differently. The hidden attribute is an HTML5 feature that hides an element from rendering, but it does not affect the layout of the page. On the other hand, the CSS display:none property not only hides the element but also removes it from the layout, as if it was never there. This can cause the layout to shift, which might not be desirable in some cases.
Can the hidden attribute be overridden with CSS?
Yes, the hidden attribute can be overridden with CSS. If you apply a CSS rule that sets the display property to anything other than none, the element will be displayed, even if the hidden attribute is present. This can be useful in situations where you want to control the visibility of elements dynamically using JavaScript and CSS.
Is the hidden attribute supported by all browsers?
The hidden attribute is a part of the HTML5 specification and is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it may not be supported by older browsers or some versions of Internet Explorer. It’s always a good idea to check the browser compatibility when using HTML5 features.
Can the hidden attribute hide any HTML element?
Yes, the hidden attribute is a global attribute, which means it can be applied to any HTML element. Whether it’s a div, span, img, or any other element, you can use the hidden attribute to prevent it from rendering on the webpage.
How can I dynamically show or hide elements using the hidden attribute?
You can dynamically show or hide elements using the hidden attribute with JavaScript. By selecting the element with JavaScript and using the setAttribute or removeAttribute methods, you can add or remove the hidden attribute, thereby controlling the visibility of the element.
Can search engines see content hidden with the hidden attribute?
Yes, search engines can see and index content hidden with the hidden attribute. This is because the hidden attribute only prevents the element from rendering on the webpage, but it does not remove it from the HTML code. Therefore, it’s not a good idea to use the hidden attribute to hide content that you don’t want search engines to see.
Can the hidden attribute be used for accessibility?
Yes, the hidden attribute can be used to improve accessibility on your webpage. Screen readers and other assistive technologies recognize the hidden attribute and will ignore elements that have it. This can be useful for hiding elements that are not relevant or might be confusing for users with disabilities.
Can the hidden attribute be animated with CSS transitions?
No, the hidden attribute cannot be animated with CSS transitions. This is because it’s a boolean attribute and does not have intermediate states between present and absent. If you want to animate the visibility of an element, you should use the CSS opacity or visibility properties instead.
Can the hidden attribute be used in SVG elements?
Yes, the hidden attribute can be used in SVG elements. Just like with HTML elements, the hidden attribute will prevent SVG elements from rendering on the webpage. This can be useful for controlling the visibility of SVG graphics or parts of them.
Adam RobertsAdam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.
