AshKeys

Confessions and Confusions of Ashok M A. Personal and Professional Blog.

Ashok Mannolu Arunachalam, How toHTMLCSS
Back

How to make an element hidden

There are multiple ways to make an element not visible to the user. The following are top three of those.

hidden

html
<span hidden> You can't see me! -_- </span>

One can still see this by inspecting the page using developer tools.

display: none

This is the CSS version of hidden attribute.

html
<span id="secret">
Keep it safe! O_o
</span>
css
#tribute {
display: none;
}

When we set the hidden attribute, the browser actually sets the display: none; to the respective element. Check it yourself ^_^!

visibility: hidden

This does the same thing. But, there are some significant differences between visibility and display CSS properties.

css
#tribute {
visibility: hidden;
}

Use display option when you do not want the elements to be rendered and use visibility option when you do not want to mess up the layout while hiding elements.\O/