Usage of HTML H title tag

What is an H tag?

W3C states that h1-h6 tags define headings. h1 defines the largest heading. h6 defines the smallest heading.

h1, h2, h3, h4, h5, h6, as title tags, in descending order of importance. I think it is necessary to follow this principle. It can make the hierarchical relationship of the page clearer, allow search engines to better crawl and analyze the subject content of the page, and so on. For better understanding, please see the following code:

 < body >
   < h1 > First level title </ h1 >
   < p > Paragraph </ p >
   < div >
      < h2 > Secondary Title </ h2 >
      < p > ... </ p >
      < div >
         < h3 > Level 3 heading </ h3 >
         < p > ... </ p >
         < div >
            < h4 > Level 4 heading </ h4 >
            < p > ... </ p >
         </ div >
      </ div >
   </ div >
</ body >

The default styles of browsers also decrease in importance, with font sizes decreasing from h1 to h6. The styles in different browsers are slightly different. Due to these differences, we usually use CSS to unify them in the layout.

How do you use it?

Now many websites (including Taobao, Sina, Sohu and other well-known websites) like to use h1 in their logos, as shown in the figure:

It makes sense that everyone uses it this way, and it actually has many advantages: it summarizes the content of the entire page, and the LOGO is very close to the body, which makes it easier for search engines to crawl the topic as quickly as possible. It is also more accurate in terms of semantics.

Of course, not all websites use h1 in their logos. NetEase’s usage is a special example:

NetEase sets the display:none style for h1 to make it hidden. This not only solves the problem of not knowing where to put h1, but also plays a role in SEO optimization, killing two birds with one stone.

The h1 of Tencent’s homepage is the headline news, as shown in the picture:

From the above examples, we can see that the usage of h1 on various websites is different. So where should h1 be placed? It's always a controversial question, but I don't think there is an absolute answer as to where to put it. I think it should be considered comprehensively based on factors such as the web page's positioning, type, and user search habits. For example, for a news website, you can put h1 on the headlines; for a comprehensive portal website, put h1 on the LOGO; if it is a company website, you can also put h1 on the LOGO, because users generally like to search for the company name when searching for a company; if there is a website slogan, you can also put h1 on the slogan, which is also a good choice. In short, it is best to choose the one that suits you best.

Regarding h2, I generally like to use it in the large column of the homepage, as shown in the figure:

For content pages, I prefer to use h2 for article titles and h3 for column titles, as shown in the figure:

h3 is mostly used for column titles, as shown in the figure:

The H tag used on the homepage of the Nongxintong product not only has a clear hierarchical relationship, but also highlights the importance of product content, which is also very beneficial to search engines.

The following example is also very interesting, as shown in the figure:

The column title uses h2, and the news title uses h1. If we talk about the hierarchical relationship, their order is reversed, but it is not wrong. When actually using the H tag, we can also define it according to the importance of the content. Therefore, only by mastering the basic theory and applying it flexibly can its effect be maximized.

From the above examples, it is not difficult to see that the usage of H tags is very flexible and is not limited to these few usages. We only need to follow the principle of decreasing importance when using them. The same applies to h4-h6.

Summarize some

Based on the understanding and application of H tags by reference materials, front-end production experts, well-known websites, etc., I have summarized the following specifications, hoping to provide some reference value for everyone.

h1 level title

It represents the most important thing, and its position in the page is as important as that of keywords. It is usually used in website titles or headlines. Some large websites also use it in their logos. Although multiple h1 codes can be written, they are actually semantically unique. It is best if the h1 title appears only once or not at all on a page.

h2 secondary title

It mainly appears in the article titles and column titles of the main content of the page. The three-column structure is generally in the middle, and the two-column structure is generally on the important side. Can be used with h3.

h3 level 3 heading

Usually the sidebar of the main page. h4 is its auxiliary and does not appear frequently.

The page hierarchy cannot be too deep, so h4, h5, and h6 generally appear less frequently.