The usage of H tag, especially the usage of h1, has always been a controversial issue and is also a question worthy of our study. Based on the experience of my predecessors, I wrote this article based on my understanding of H tags, hoping it will be helpful to everyone. What is H tag?
W3C points out that the h1-h6 tags can define titles. h1 defines the largest title. h6 defines the smallest title.
h1, h2, h3, h4, h5, h6, as title tags and decreases according to importance. I think it is necessary to follow such principles, which can make the hierarchical relationships of the page clearer, and allow search engines to better crawl and analyze the topic content of the page, etc. For a better understanding, please see the following code:
<body> <h1>First-level title</h1> <p>Paragraph</p> <div> <h2>Second-level title</h2> <p>...</p> <div> <h3>Second-level title</h3> <p>...</p> <div> <h4>Second-level title</h4> <p>...</p> </div> </div> </div></body>
The default style of the browser also decreases based on importance, and the font size changes from large to small from h1 to h6. There are some differences in styles in different browsers. Due to this difference, we usually use CSS to unify them in layout.
How do you use it?Nowadays, many websites (including well-known websites such as Taobao, Sina, Sohu) like to use h1 on the logo, as shown in the picture:
It's not without reason for everyone to use this, but in fact there are quite a lot of advantages: it summarizes the content of the entire page, and the LOGO is very close to the body, which makes it convenient for search engines to capture the topic the fastest, and in terms of semantics, it is also more accurate.
Of course, not all websites use h1 on LOGO. NetEase's usage is a more special example:
NetEase sets the display:none style to hide it, which not only solves the contradiction of not knowing where to put h1, but also plays the role of SEO optimization, which can be said to kill two birds with one stone.
And Tencent’s homepage h1 is the headline news, as shown in the picture:
From the above example, we can see that the usage of h1 is different for major websites. Where to put it on h1? It has always been a controversial issue, but I don't think there is an absolute answer to where to put it. I think it should be considered based on factors such as the positioning, type, and user search habits of the web page. For example, for news websites, you can put h1 on the headline news; for comprehensive portal websites, you can put h1 on the LOGO; if the company website can also put h1 on the LOGO, because users generally like to search for the company's name; if there are website slogans, you can also put h1 on the slogan, which is also a good choice. In short, choosing the one that suits the best is the best.
Regarding h2, I usually like to use it on the large column of the homepage, as shown in the picture:
For content page, I am more accustomed to giving h2 to the article title, and the column title is represented by h3, 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 R&F products not only has clear hierarchical relationships, 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 their order is reversed according to hierarchical relationships, it is not wrong. When actually using H tags, we can also define it based on the importance of the content. Therefore, only by flexibly applying the basic theories can its effect be maximized.
From the above examples, it is not difficult to see that the usage of H tag is very flexible and is not limited to these usages. In our application, we only need to follow the principle of decreasing importance and learn from one example and apply it to other aspects. The same is true for h4-h6.
Summed someBased 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 bring you some reference value.
h1 first-level title
It represents the top priority, and its position is as important as the position of keywords in the page. It is generally used in website titles or headlines, and some large websites are also used in LOGOs. Although h1 codes can be written multiplely, they are actually semantically unique. It is best to appear only once or not in a page.
h2 Level 2 title
It mainly appears in the article title and column title 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 three title
Generally, the sidebar of the main page. h4 is its auxiliary and appears not very frequently.
The page level relationship cannot be too deep, so h4, h5, h6 generally appears less.