😄 This post is based on the content from coding.courses.
Definition and Usage
The hidden attribute indicates that an element is hidden, meaning it is not visually rendered and is not accessible to screen readers.
Use this attribute when the element's content should not be presented to the user.
- The hidden attribute is a global attribute that can be used on any HTML element.
- It is a Boolean attribute, meaning you only need to include the attribute name without specifying a value.
Basic Example
<style>
p {
padding: 1em;
border: 1px solid #cdcd4c;
border-radius: 0.5em;
background-color: beige;
}
</style>
<p>
This content is important and should be read right away.
<br>
I'm really glad you found it! 😃
</p>
<!--
As a Boolean attribute,
only the attribute name is included
without specifying a value.
-->
<p hidden>
This content is not currently relevant to this page and should not be displayed.
<br>
There's nothing to see here. 😥
</p>
Features
- They are not displayed on the screen.
- They do not take up any space in the layout.
- They are hidden from all forms of presentation, including screen readers and other assistive technologies.
The Difference Between Using the HTML hidden Attribute and CSS display: none
# HTML hidden
Used to explicitly define in the HTML that the content is currently irrelevant and should not be presented to the user.
(Semantic Importance)
# CSS display: none
Used primarily to hide an element visually as a matter of styling.
(Presentational Importance)
References
HTML hidden Attribute – Proper Understanding and Usage - codingCourses
The hidden attribute indicates that an element is hidden, meaning it is not visually rendered and is not accessible to screen readers. Use this attribute when the element's content should not be presented to the user.
coding.courses
Top comments (1)
Thanks