How to hide an element
Short answer
display: none removes the element from the page entirely:
<p>Before the hidden block.</p>
<p style="display: none;">The hidden block.</p>
<p>After the hidden block.</p>The hidden attribute does the same right in HTML: <p hidden>. It is handy to set and remove from JavaScript.
Hide but keep the space
visibility: hidden makes the element invisible, but its space is kept:
<p>Before the hidden block.</p>
<p style="visibility: hidden;">The hidden block.</p>
<p>After the hidden block.</p>Opacity
opacity changes the transparency from 0 to 1. A transparent element stays in place and reacts to clicks:
<p style="opacity: 0.4;">Translucent text</p>To hide an element only visually and keep it for screen readers, use the technique from "How to hide an element visually but keep it for screen readers".
Common mistake
The element is hidden with opacity: 0 and considered gone. The invisible button still takes up space, catches clicks and receives keyboard focus:
<button style="opacity: 0;" onclick="alert('Clicked!')">Hidden</button>
<span>← there is an invisible button here</span>Functions used in this recipe
- display — Decides how an element behaves in the flow and how it lays out its content.
- hidden — Hides an element: it is not shown and not available to screen readers.
- visibility — Hides an element but keeps the space it occupies.
- opacity — The transparency of the whole element together with its content.