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."

OR

[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

Your webpage is not going to break if you don't follow the order or have more than 1 h1 tags but it will definitely look ugly.

Following point 1 and point 2 that you mentioned is not mandatory but advisable mainly for search engine optimization(seo). It's one of the white hat seo techniques which will somewhat help in your web page ranking by a search engine crawler. Secondly, your webpage would be more semantically correct and with a better looking outline.

Answer 2

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.

Answer 3

It really does not matter what order you use them in. The reason that they say to use them in order is probably because if you had text in the body of the document that was larger than the title, it would look strange.

It is basically the same as changing the font-size and font-weight because that is what it does in addition to some padding.

Answer 4

Rule of thumb: If it looks fine without any CSS, it's fine. Of course, rich content will never work without styling, but strive to make it look as good as possible without CSS.

The main difference between levels in font size. You should be fine, whatever you do with them, as long as you don't do

<h6>Page heading</h6>
<h5>Section heading</h5>
<h4>Subsection heading</h4>

Or weird stuff like that. h1 is supposed to be the biggest and most important, and while h6 (or something else, e.g. <bigheading></bigheading> (yes, CSS will work on any tag)) might work if you style them right, they are not recommended or semantically correct.

Answer 5

Unless you're doing some SEO, you don't need to worry about in which order you use the HTML H1.....H6 headings. But It is recommended to use the H1 heading in the first place, but in general it is acceptable in any order.

This below order is just show them in a particular order nothing else.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Here is a great reference from SnoopCode http://www.snoopcode.com/html/html-headings and how to use them.