Document Structure: Headers
The basic HTML tags that we have available to us include header tags at six different levels — H1 through H6. H1 is the largest, and H6 is the smallest. These tags are meant to be used to organize our web content in a hierarchical way — H1 at the top, which might include some H2s before moving on to the next H1, and so on.
The problem that we often see is that people creating content don’t like the way the header tags style the text — they find that the text of the H1 tag is too large, so they start with something smaller, like an H2 or an H3, and then may not follow clear, regular hierarchy as they move through their page.
In other cases, users may create section headers in their content by manually making text bigger, making it bold, underlining it, and so on.
Both of these are bad habits that create problems for users who rely on alternative technology to access the pages. Headers provide organizational signposts that a screen reader can use to allow a user to skip around in a document the same way a sighted user might visually scan across several headings looking for the piece of content they need. If those headers are not created properly, it can interfere with the screen reader’s ability to help the user navigate around the page.
To use headers properly, all documents should start at the H1 level, which is usually reserved for the page’s title (and so H1 is usually only used once). The heading that follows an H1 should be a H2 (for a sub-topic on the page).
An H2 should be followed by an H3 (for a subpoint within the H2’s topic), or an H2 (for a topic that is a sibling to the previous H2 topic). And so on.
An H3 should be followed by an H4 (for a subpoint within the H3’s topic), or an H3 (for a topic that is a sibling to the previous H2 topic), or an H2 (for the next major subpoint), but never an H5 or H6. And so on.
It’s never acceptable to skip heading levels going down the chain (don’t skip from H1 to H3), but it’s entirely acceptable to skip going up (from h4 to h2).