semantic markup - Proper use of HTML heading tags

Question

I'm having trouble understanding the proper usage of HTML headings. I'm using books and online resources to self-learn but there are slight discrepancies on how to use them.

1. Note that the h1 tag is only used once, as the main heading of the page. h2 to h6, however, can be used as often as desired, but they should always be used in order, as they were intended. For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2.
2. the logical heading level reflects its importance in relation to the main content.

So the question is:

Do I use them in order where h4 must be a sub-heading of h3 which should be a sub-heading of h2 and so on or use the heading levels according to its importance in relation to the main content?

Although, I have seen both methods being used. However, the second method kind of messes with the document outline. Just want to get some other opinions on this.

Answer 1

For HTML5:

1. Decide which outline your document should have.
2. Use heading elements (h1-h6) and sectioning content elements (section, article, aside, nav) to achieve this outline.

Both statements you quoted are not correct or complete:

• Regarding [1]: The h1 doesn’t have to be used only once per document (and it doesn’t have to be used for the "main heading").
• Regarding [2]: The spec defines the heading rank, which doesn’t necessarily have to be importance.

When you always wrap sections in a sectioning content element (the spec encourages to do this), so every section has one heading at maximum, then it doesn’t matter which heading rank you choose, but:

[…] authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level

When you don’t always use sectioning content elements where appropriate, so a section has more than one heading, skipping heading levels (or using them for specifying "importance") can lead to an incorrect outline.