On the semantics of HTML tags in CSS layout

A lot of people are doing front-end, of course, this includes a lot of novice, perhaps in the novice's idea is in the layout of the time do not use the font tag and so on even the web Standard, so that today's online "div flooding", a look at the source files, Huo, in addition to the div no other tags.

Here, I can be very responsible to tell you, this is not called the Web Standard, this is called "Div+css". A veritable "div+css".
Perhaps someone will say, I use "div+css" made out of the page completely express the intention of the design diagram, the browser is compatible, there is no problem.
It's true that the page you're doing does not seem to have any problems, notice that it says "There's nothing wrong", that's all.

People can judge the semantics of content through the division of vision, but the search engine sees just the code. Search engines can only use tags to determine the semantics of content.

So why should we pay attention to semantics, because a large part of the page traffic is from the search engine, to make the page as friendly as possible to the search engine, so as far as possible to make the label semantic.

Div This tag for the search engine is only a partition of the role of content, and did not tell the browser that the contents of the tag is what the use of. So, the entire page only with Div layout, then this page for the search engine is not as important as a word, because the search engine does not know what your focus on this page, what the list is, what the content is and so on.

All tags are semantic, so let's look at some of the tags ' semantics:

Div semantics: Division (delimited)
Span semantics: span (range)
OL semantics: Ordered list (sorted)
UL semantics: Unordered list (unordered lists)
Li semantics: List item (listing items)
P Semantics: Paragraph marks (paragraph mark)
HX Semantics: Headword (title)
............

If you ignore the label semantics and the default style, all the tags with div, in fact, you can write a good visual effect of the page, as long as you flexible use of CSS. But in that case, although the visual to meet the requirements, but the entire page semantics are not, search engine still can not understand. So, remember:

Structure (HTML) is the focus, style (CSS) is used to modify the structure. Therefore, the first to determine the HTML, determine the label, and then choose the appropriate CSS.

In general, all labels will have a default style, so a simple way to determine whether the page label semantics is good is: To remove the style, see whether the structure of the Web page is well organized, whether it is still very good readability.

In addition, it is important to mention that the H tag, h tag semantics is the title, the search engine is more sensitive to this label, especially H1, and H2. A well-meaning page, h tags should be complete and orderly without faults. In other words, to h1,h2,h3,h4 such push down, do not h1,h3,h4, Miss H2. A well-structured web page, H tags can organize an outline of a Web page. Deepen your understanding of HTML.

Although the HTML is very simple, but it is not easy to use good, the more research you will feel more interesting.

This article turns from Zeroz

On the semantics of HTML tags in CSS layout