HTML Tag semantics and CSS semantics in css layout

HTML Tag semantics and CSS semantics in css layout

Many people are working on the front-end. Of course, there are many new users here. Maybe the new idea is to do not use font labels or other web standards when doing layout, this has caused "div flooding" on the Internet today. Looking at the source file, Huo, there are no other labels except div.

Here, I am responsible for telling you that this is not a web standard, but a "div + css ". A real "div + css ".
Some people may say that the page I made with "div + css" fully expresses the intent of the design drawing. the browser is compatible and there is no problem.
Indeed, the page you created looks like there is no problem. Note: here we are talking about "it seems there is no problem", that's all.

People can determine the meaning of the content through visual division, but the search engine only sees the code. The search engine can only use tags to determine the meaning of the content.

So why do we need to pay attention to semantics? because a large part of the page traffic comes from the search engine, we need to make the page as friendly as possible to the search engine, so we need to make tags semantic as much as possible.

The div tag only serves to split the content of the search engine, and does not tell the browser what the content in the tag is. Therefore, if the entire page only uses div layout, this page is not as important to the search engine as a sentence, because the search engine does not know what the focus of your page is, what the list is, and what the content is.

All tags have semantics. Let's look at the semantics of some tags:

Div semantics: Division (separated)
Span semantics: Span (range)
Ol Syntax: Ordered List (sort List)
Ul Syntax: Unordered List (Unordered List)
Li Syntax: List Item (List Item)
P Syntax: paragraph marks (section mark)
Hx semantics: headword (title)
............

If you ignore the label semantics and default style, all labels use div, but you can also write a page with good visual effects, as long as you use CSS flexibly. However, even though the visual requirements are met, the entire page does not have any semantics and the search engine still cannot understand it. Therefore, remember:

Structure (html) is the focus, and style (css) is used to modify the structure. Therefore, you must first determine the html, tag, and then select the appropriate css.

Generally, all labels have a default style. Therefore, a simple way to determine whether the webpage tag semantics is good is to remove the style and check whether the webpage structure is organized and orderly, whether it still has good readability.

In addition, it is worth mentioning that the h tag is the title, and the search engine is sensitive to this tag, especially h1, and h2. For a page with good semantics, the h tag should be complete and orderly without faults. That is to say, we need to push down h1, h2, h3, h4 like this. Do not use h1, h3, h4, or Miss h2. For a well-structured webpage, the h tag can organize an outline of the webpage. Enhance your understanding of html.

Although HTML is simple, it is not easy to make good use of it. The more you study it, the more interesting it will be.

This article