DEV Community

Cover image for A Simpler and Better Way of Hiding Elements with HTML
Altug Gurkaynak
Altug Gurkaynak

Posted on

A Simpler and Better Way of Hiding Elements with HTML

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}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)