HTML hidden attribute

hidden attribute hides the element that is not yet relevant to the page but will be useful later on.


<p>Remove hidden attribute to understand.</p>
 <div height="500px" width="500px" hidden>
  <p>This block of content has been hidden by an attribute. The text will be visible by removing this attribute.</p>
Try </>

visual elements should not link to the hidden elements that would end in user confusion.

It is not appropriate to use the href to link to area that has hidden attribute.

CSS property

The hidden attribute may be applied using CSS property. A CSS property 'display: none;' is used to hide the content. And CSS property 'display:block;' again displays the hidden content.


<div style="width:300px; height:300px; display:none; background-color:lightgray;"> </div>
Try </>

It is important to remember that hidden property hides the block of content but still occupies the area. But there is another property 'display: none;' that does not even allow the content to occupy the area.

hidden attribute value

hidden attribute is a boolean attribute that has only two states.

Related Tags

All the visual HTML elements support the hidden attribute.

Was this article helpful?




Get the newsletter