The heading levels (1-6) are often considered a way of describing and determining the “importance” of a heading, with h1 being the most important. This might be reflected in the visual appearance of headings—higher-level headings typically appear as bigger and bolder text than lower-level headings.
But you can't just put an “important” heading anywhere. Its heading level relates to how much content it refers to, and that has to do with structure.
Reflecting structure accurately allows screen-reader users to use their screen reader's heading-navigation feature to navigate by heading level, building up an idea of document structure. It also ensures that, for people who use custom stylesheets, heading structure is preserved even when the appearance of headings is changed.
Examples
✓ Good example
Heading levels determine the structure of a page, and this structure depends on sections belonging to subsections. Using heading levels to describe this relationship is quite simple: An h2 would head a section that may contain subsections. To show that these are subsections, you would code their headings with an h3.
<h2>Section Heading</h2>
<!-- section content here -->
<h3>Subsection heading</h3>
<!-- subsection content here -->
<h3>Another subsection heading</h3>
<!-- subsection content here -->
In a table of contents, this structure might be illustrated using indentation, like so:
-
Section Heading
- Subsection heading
- Another subsection heading
✗ Bad example
To create a coherent structure, you should not skip heading levels. That is, a section headed with an h3 should not contain immediate child subsections headed with h5 or h6.
<h3>Section heading</h3>
<!-- section content here -->
<h5>Subsection heading</h5>
<!-- does this content belong directly to the h3 section or not? -->
<h6>Another subsection heading</h6>
<!-- this will be considered a subsection of the h5 section headed above -->