Headers h1-h6: why important and for what they are used?

Headers and subheaders on a web page are aimed to help readers to understand the content of the text. It appears to be useful not only to humans: in the same way, Google and Yandex search bots look through the text and determine how logically it is composed. Therefore, the correctly placed headers h1 – h6  are both convenient and efficient, as pages are ranked in a better way and are shown up more often in search results.

Let’s explain how to add tags correctly, why they are needed and how not to make a mistake.

Tags <h1> – <h6>: what are they?
Tags <h1> – <h6> represent the elements of HTML code, that help to identify the headings in the text. The most important heading is <h1> - the greater is the number, the lower is the importance of the heading. 

The HTML language (HyperText Markup Language) is used to describe the structure of web pages. HTML tags tell the browser how to format the text on the page to be a readable one. So, the browser highlights the headers in the text with different tags in different colors or font sizes. Text that is not tagged is displayed by the browser as normal.

From the technical point of view, tags tell search engines that the phrase enclosed between them is the heading. The purpose of headings is to break the text into sections, set hierarchy and emphasize the logic of presentation. HTML provides six levels of headings. This is enough for practical purposes: most pages have two or three levels, very rare the four levels are used.

For the reader, the title of the section reflects its main idea. The structure of the headings should be subject to the logic of presentation - from general to detailed.

Search engines perceive them in just about the same way: tags help to understand what is the text about, what are the main and secondary ideas. 

Headings for users and search engines
Heading tags tell the search engines about the structure of the text. Due to tags, they distinguish headings from the main text and define the degree of their importance.

For sure, modern algorithms allow engines to understand the contents of the page without tags. However, other things being equal, the well-designed pages would be displayed on a higher position in the search results.

The text enclosed in heading tags usually becomes bigger in size as in comparison with other text on the page, this fact indicating its importance and thus could make it easier the understanding about the kind of content placed under the heading.

The structured text is easier to read, in such a way becoming more useful for the reader. Well-written headings and subheadings should meet several conditions:

1. Tag <h1> is assigned only to the main title of the text. H1 level header can be the only one.
2. Hierarchy needs to be respected. For example, headers of H3 level could be used only after H2 level. 

3. The headings should indicate to the reader (and to the search engine) what this section is about. Allegories and metaphors are not appropriate here.
4. Keywords should be used in such a way that does not distort the meaning of heading.

<title> Tag  is very similar in function to <h1>. It is also the title of the page. The user can see the <title> in the browser tab line and in the search results snippet.

Frequently the text heading and the title are the same, although they have different functions. The title is displayed in the search results. Its length is limited to 50–70 characters: long phrases are cut, therefore the title must be concise so that the user could understand the page content. Yet, the text heading (h1) is always visible to the reader as a whole thing and can be of any length.

How to mark a heading in practice 
All the popular CMS have tools to create headers. In WordPress, you simply select the heading text, and then select the option you need from the drop-down list or use hotkeys. CMS tags the page code by itself, while the corresponding visual styles (font, size, color, and so on) are applied to the title.



The second option is to label the headings with tags in the code: an opening tag is placed before the heading, and a closing tag, marked by a slash, is placed after the heading.

Visual design of Headers 
The reader and the search engines perceive the text in different ways.  For the reader, the header is a line that stands out of the main body text. For the search engine, the header represents the text enclosed between the opening and closing tags.

It is possible that the header is tagged, but does not differ from the rest of the text in its appearance. However, it also could be that a phrase in a bigger font is not perceived by the search engine as a heading.

It is important not to fall into confusion:
- do not use heading tags to highlight text.
- make sure the headers look like headers, not like plain text highlighted in bold: this often happens with lower-level headers starting with <h4>.

In order not to confuse the headings and the main text, they can be highlighted using a font of a different style or color. Such settings can be made in the theme design of your site.

Mistakes in using Tags
If it’s important for you how your site is ranked by search engines, you should make no mistake when using tags. The list of mistakes is as follows:
- multiple headers <h1> on one page;
- non-observance of the hierarchy of headers, for example, the <h2> tag was used inside the <h3> section;
- applying tags not to text, but to other elements, for example, images.

Gross errors in the tags usage result in an inadequate display of the page by the web browser. One of the reasons is that they interpret custom code in different ways. This is especially true for older browsers that do not support HTML5. As a result, the headers may not be displayed as intended, in such a way bringing the reader into confusion.

Remember the main thing!
The headings and subheadings on the page make the text structured, emphasize the main idea and help the reader to interpret the information quickly and correctly. Readability improves the user experience and therefore is taken into account by search engines: they rank easy-to-read pages on the top.

To find errors on the website, you need to check it by yourself, using HTML validation tools or ordering an SEO audit from the professionals who would check if the resource complies with the requirements of search engines.

The reader will distinguish the headings in a visual way, while for search engines purposes they are highlighted with the tags <h1> - <h6>. They can be used in many ways. The main thing is not to make mistakes when using them.

Using the <h1> - <h6> tags on your site, you improve its quality in terms of SEO and take care of the reader.