HTML/CSSQuestion 09 of 14
Hiding elements
Answer out loud or in your head first, then compare.
Answer
display: none removes the element from the layout. visibility: hidden hides it but keeps the space it occupies. Both usually remove it from the accessibility tree as well.
CSS
.removed { display: none; }
.invisible { visibility: hidden; }To be precise: HTML hidden is an attribute, not a display value. It usually means hiding without taking up space.
Pitfall: opacity: 0 only makes the element transparent. It can still catch clicks, receive focus and be present for screen readers.
How did it go? Be honest — “Not yet” puts the question on your review list.