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 the

Answer 1

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.

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

Regarding the Lighthouse accessibility audits, heading levels should be sequentially-descending order and use CSS to visually style the headings as desired. Instead of skipping heading levels to achieve a desired visual style.

For example:

<h1>Page title</h1>
<section>
  <h2>Section Heading</h2>
  …
    <h3>Sub-section Heading</h3>
</section>

You can get in-depth information about structured headings in the official documentation.

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

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 6

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.