Hiding an element in web pages is sometimes necessary or we use this for an instant (or temporary) fix. Lets examine the most common types of element hiding in web pages.
Our first two are going be CSS attributes: display: none and visibility: hidden
Even though most of us already use these, let’s sum up for to be clear.
.hideThis {display: none}
.doNotShow {visibility: hidden}Any element which has the hideThis class (display:none) will be hidden and will not take up any space.
Elements which has the doNotShow class (visibility: hidden) will also be hidden from the eye but they will take up space for their content. If an element (lets say a paragraph), takes 2 lines of space in height, then there will a blank space which has a height of 2 paragraphs if visibility: hidden is applied.
How about using an HTML attribute?
Apart from the CSS hiding, if it is suitable, we can also use a simpler method, such as hidden
<p hidden>This paragraph is hidden and not does not take up space. By HTML boolean attribute</p>Looks very simple right? hidden is a boolean HTML attribute. That means, if present, it specifies that an element is not yet, or no longer, relevant and browsers will not display that element. Works the same way of its HTML twin: display: none