Hiding Elements
Two ways to hide elements — display: none removes them, visibility: hidden makes them invisible.
Step 1 of 5
Why hide elements?
Websites often need to hide things: dropdown menus that appear on click, error messages that show when something goes wrong, mobile navigation that only appears on small screens. CSS gives you two very different ways to hide elements, and choosing the wrong one leads to confusing layout bugs. Understanding the difference is essential for building real interactive pages.
Think of it this way: display: none is like removing a chair from the room — the gap closes up and other furniture shifts over. visibility: hidden is like covering a chair with an invisibility cloak — you can't see it, but it still takes up space and you'll trip over it.
Web Standard
Screen readers skip elements with display: none entirely — the content becomes invisible to both sighted users and assistive technology. If you want to hide something visually but keep it accessible to screen readers, use a different technique (like the 'visually-hidden' pattern).
Learn more on MDN