#How to #CSS #HTML

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

hidden

1
2
3
<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.

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

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

1
2
3
#tribute {
    visibility: hidden;
}

Tip: 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/

#How to #CSS #HTML