You can keep using h1-h6 in HTML5, but you can also choose to use only h1 elements for all headings and rely on the HTML5 outline algorithm to sort out the heading hierarchy. If you do this, however, you should be aware that currently there is very little support for the HTML5 outline in web browsers, screen readers and developer tools.

I bring this up because I have seen some HTML5 articles and blog posts that mention the new document outline without emphasising the current lack of support. That lack of support is a problem because it makes headings less useful to people who need a proper document outline to better understand content structure and use them as an aid for navigating within web documents. The most common example is screen reader users.

The pitfalls of using display:none have been widely known among accessibility-conscious web developers for many years (in Web terms). As I mentioned a couple of years ago in Hiding with CSS: Problems and solutions, setting an element’s display CSS property to none makes it completely invisible. It doesn’t generate a box, it doesn’t take up any place, it doesn’t affect the layout. display:none hides the element – and its descendants – visually, and it also hides the element from screen readers (most screen readers most of the time – see JAWS, Window-Eyes and display:none: Return to 2007 for more).