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#

<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.

<span id="secret">
	Keep it safe! O_o
</span>

#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.

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