What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
The key difference seems to be that hidden
elements are always hidden regardless of the presentation:
The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.
http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute
Since CSS can target different media/presentation types, display: none
will be dependent on a given presentation. E.g. some elements might have display: none
when viewed in a desktop browser, but not a mobile browser. Or, be hidden visually but still available to a screen-reader.
Simple rule:
Are you hiding something because it's not yet semantically part of the page content, like a series of potential error messages that have not been triggered yet? Use hidden
.
Are you hiding something that is part of the page content, such as toggling a paragraph into a collapsed state to avoid clutter? Use display:none
.
hidden
is about semantics (whether something is currently part of the page content) and display: none
is about presentation of the page content.
Unfortunately, hidden
will NOT override any display
CSS, even though it would make intuitive sense that something that is not part of the page should never be displayed. If you want hidden
to be respected, add this css rule: [hidden] { display: none !important }
Examples:
Use
hidden
for a "thank you" message that should not exist as part of the page until a form has been filled in.Use
hidden
for a series of potential error messages that could be shown to the user depending on their actions on the page. These errors are not semantically part of the page content until an error has occurred.Use
display: none
for navigation that is only shown when a user hovers or clicks a menu button.Use
display: none
for tabbed panes, where the only reason for the tabbed panes is that it would be too overwhelming to show the user all of the panes simultaneously. (Perhaps if a user had a wide enough screen, all panes would be shown. Therefore the panes were always part of the content of the page, and so CSS presentation logic is the appropriate choice).Use
display: none
to collapse a paragraph or section inside a document. This indicates the paragraph is still part of the page content, but we've hidden it for convenience to the user.
Note: Accessibility devices would benefit from knowing the difference between navigation or content that is present but not currently displayed, vs content that is not currently considered to be part of the page and that should therefore never be described to the user.