What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?

Question

HTML5 has a new global attribute, hidden, which can be used to hide content.

Answer 1

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:

1. Use hidden for a "thank you" message that should not exist as part of the page until a form has been filled in.

2. 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.

3. Use display: none for navigation that is only shown when a user hovers or clicks a menu button.

4. 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).

5. 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.