How to easily hide a HTML element

There are three easy ways to hide an element using CSS; each of them a little different than the other.

• display: none; — display specifies how an element will be displayed. When you set the property to none the element will not be displayed.
• visibility: hidden; — visibility specifies whether or not an element should be visible. When you set the property to hidden the element is still displayed, it’s just hidden from view (invisible).
• opacity: 0; — opacity specifies the degree to which content behind the element is hidden. When you set the property to 0 the element is still display, but it will become invisible and anything behind it will become completely visible.

Reference Sheet:

The difference between each of the three ways for hiding an element

Important note: using visibility: hidden; on an element will remove it from the accessibility tree. This will cause the element and all its descendants to no longer be announced by screen reading technology. Descendants are also affected because the visibility property is an inherited property in CSS.