2

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.

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Larry21
  • 169
  • 3
  • 7
  • You should specify the sources of quotations. What [1] says is partly wrong: although there is usually just one `h1` per page, this is not a requirement, and e.g. a bilingual page may well have two `h1` elements. – Jukka K. Korpela Feb 08 '14 at 10:00
  • This is primarily opinion-based, because specifications are vague and there are many aspects that could be considered, with their relative weights depending on context and subjective views. – Jukka K. Korpela Feb 08 '14 at 10:02

8 Answers8

7

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.

unor
  • 92,415
  • 26
  • 211
  • 360
  • 1
    @Reed: Note that the link goes to an old version of the spec (wasn’t a standard yet at the point of writing the answer). I updated the links in my answer, they now point to the current standard. – unor Jul 25 '19 at 19:41
3

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.

Kirti Thorat
  • 52,578
  • 9
  • 101
  • 108
0

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.

Anonymous
  • 11,748
  • 6
  • 35
  • 57
0

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.

bjb568
  • 11,089
  • 11
  • 50
  • 71
0

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.

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
0

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Headings are important, search engines use the headings to index the structure and content of your web pages.

Users often skim a page by its headings. It is important to use headings to show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
Studocwho
  • 2,404
  • 3
  • 23
  • 29
0

Use only one heading tag like h1 or h2 rather than using many heading tags.Using multiple heading tags makes webpage looks messy. Use paragraph with font-size in css,it makes it flexible regards any change in size.

Shushant Kumar Awasthi
  • 1
  • 2
-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.

Prabhakar
  • 6,458
  • 2
  • 40
  • 51