If you think of the headings on a page as the outline of the content, each heading level acts as a new indentation. An
h2 insinuates that it is a sub section of the
h1 above it, an
h3 a subsection of the previous
h2, and so on. A screen reader user can then use commands to go to the next heading of a specific level and skip large pieces of content. If heading levels aren't logical it will be less clear as to the organization of the page and a user may feel like they have missed content.
- Every page should have one
h1, which should be at the top of the main content.
- Sub sections should increase by one heading level. Occasionally there are exceptions to this when the main content is not the first thing in the focus order.
- See 9.5 Heading structure should be consistent
Exception to rule
- CSS can be used to change the default appearance of each heading tag.