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>
 </div>
</>

Remove hidden attribute to understand.

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.

Attribute values

All possible values of hidden attribute

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

Related Tags

The tags that support hidden attribute

All the visual HTML elements support the hidden attribute.

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.

Next Previous