Headings in HTML

In total, there are 6 different tags for inserting headings - h1, h2, h3, h4, h5, h6 (h is short for heading). Each of them has a certain weight (importance): h1 - has the greatest importance, h6 - the least. But how to use these headlines correctly is one of the most controversial topics. Now let's try to sort out some controversial points.

Why do you need the correct use of headings in layout?

Firstly, it makes it possible to quickly navigate the page, which often contains a lot of information. It's like in a magazine article, quickly skimming through the headlines, you immediately notice where to stop. Proper use of heading tags will not only make it possible to visually navigate the page (this can be achieved using any tags in conjunction with style sheets), but will also make it possible for people with disabilities who use voice browsers and braille readers to find what they need just as confidently. Plus, do not forget that not all devices support cascading style sheets well (for example, mobile devices). And there are devices and plugins that allow you to quickly navigate through the document - for example, through the headings of opera.

Secondly, it will be easier for search robots to work with the page, it is easier to highlight the main and secondary ones, which means more chances to get into the top.

Thirdly, a clear logical structure of the document is a step towards improving the quality, understandability, and accessibility of information, this is a step towards a new level of information provision - the Semantic Web.

What is the correct (recommended) header hierarchy?

The specifications state the following: Headings on a page should have a clear hierarchy of levels, ie. h2 must come after h1, h3 after h2, and so on. Omitting levels in the sequence of headings can give the impression that the structure of the document has not been properly thought out, or that certain headings have been chosen for their visual performance rather than their meaning.

Google says pretty much the same thing. We do not recommend:

• use heading tags where <em> or <strong> tags would be more appropriate
• switch randomly from headings of one size to another
• litter the page with unnecessary headings
• use headings only to style the text, without defining the structure of the page.

Too many headings on a page can confuse the user and make it hard to know where one topic ends and another begins.

After studying the specifications, recommendations of search engines, as well as ardent defenders of semantic HTML, we can summarize:

• use headings only where there are really headings
• observe a clear hierarchy of headings (h2 follows h1. h3 after h2, etc.).
• it is desirable not to violate the clear sequence of levels
• it is desirable that the first heading (by code) on the page be h1
• you should not randomly switch from headings of one size to another, observe a clear hierarchy of nesting of headings.