Web UI -- returning HTML tags for their original meaning

Good article not only to recommend, but also to favorites, the original from: http://www.cnblogs.com/CoreCaiNiao/archive/2011/06/19/2084651.html

To tell the truth, the word "Div + CSS" does not know how many people are harmed. Maybe the author's intention is correct, but the followers have misinterpreted its meaning in terms of performance, the whole page should be a combination of Div + CSS files. In this way, there is no visual impact, because the previously designed page is restored, but if this HTML document is handed over to a machine (such as a spider) for analysis, it may not find the focus, your entire page is like a nest of termite. The first thing it wants to do is remove the same things and then filter the content.

The development of search engines has led the Internet industry to create a professional "Seo". Because "keywords" are required, almost all "Seo" put "technology core" on the research keywords, in addition to filling the title, keywords, description, and entire document with keywords that may be of interest to search engines. Even the alt attribute of the image and the title attribute of the text container are all "keywords", so the seemingly perfect "Seo technology" often ignores two important points: 1. html tag definition. 2. Simplified pages. The former allows the search engine to "understand" the "meaning" of the entire page, while the latter increases the access speed and reduces the server load. Unfortunately, Seo often does not understand HTML and what the load is.CodePeople often do not understand the "Seo technology", which may cause a considerable number of career bottlenecks, and the mentality of quick success and quick success makes the two occupations do not learn each other and do their own thing.

In my development experience, I once encountered an article about the full Div of HTML tags, which seems to be <div> apart from

There are more than 50 HTML tags. For details, see chapter 4 of http://www.w3.org/tr/html5/spec.html?contents. commonly used HTML tags (except form tags) mainly include the following:
Div, UL, ol, Li, DL, DT, DD, P, span, h1-h6, label, em, strong, IMG, A, U, B, I, S...
I think it is necessary to define them and then divide them into groups. W3C groups are more scientific than me, but I do not understand them well:

Div: Division(Separation, segmentation, differentiation, distribution, and demarcation line), Tags can divide the document into independent and different parts. As a representative of block-level elements, because there is no fixed format, the abuse is currently the most serious.
Ul: unordered list(Unordered list) AndLiElements are combined into groups.
OL: ordered list(SequentialTable) AndLiElements are combined into groups.
Li: LIST ITEM(LIST ITEMS) "Must" Be at the parent levelUlOrOlIn the container, this must be added by myself.W3CJust like this:

Contexts in which this element can be used:

Inside OlElements.

Inside UlElements.

Inside Menu Elements.

I added an must before it to indicate the seriousness of the problem ^

DL: definition list(Definition list) AndDT(Definition termDefined project) AndDd(Definition descriptionDefinition description) To form a group.

P: paragraph(Section) Used for storageArticle.

Span: Span(Range) Label is used to combine the content of the Section in the document. As an inline element, because it does not have a fixed format, there are many misuse at present.

H1-h6: Head(Title 1 to Title 6), Please note that the head here indicates its meaning, which is different from the Note: If the search engine finds that the page contains the H tag, the content is considered important and the Importance gradually decreases from 1 to 6.

Label: Label(Labels for Form ControlsIt is called a tag, but here, W3C defines it as a form description. For example, we like to add it before or after the input tag.

EM: emphasized(Increase, emphasizeTo emphasize the text contained in the file. The default style is italic. The display effect is similar to that of <I> tags, but search engines do not think they are the same, because search engines tend to respect the definition given by W3C and ignore your display effect.

Strong: strong(Increased emphasis) To emphasize the text contained in it. The default style is bold. It emphasizes a stronger effect than em. Although <B> tags can also be bold, search engines do not think they are the same for the same reason.

IMG: Image(Images);

A: Anchor(AnchorCreates a basic chain in a hyperlink.

U: underline(Text underline.

S/strike: strikethrough(Strikethrough), Draw a line on the text.

By display style:

Block-level elements or block elements. (the default style is block) labels include:
Div, UL, ol, Li, P, DL, DT, DD, h1-h6...
By default, they occupy only one row. Unless you change them with styles.

Inline elements (the default style is inline, but I think it is easier to understand "inline elements") labels include:
SPAN, label, em, strong, IMG, A, U, B, I, S...
By default, they will honestly coexist with other elements in one row. When some specific styles such as display: block are added to them, they will also overhead one row. However, it should be noted in advance that not all display: blocks must occupy one row. If there is width, float pushes them to the front, in this way, they will also squeeze in a row with other elements.

By combination:
Fixed groups:
Ul -- Li
Ol -- Li
DL -- DT -- dd
Scattered individuals:
Others...

Note the following:
1, Inline elements, they are not "framed" themselves, that is, their size is controlled by their content, before it becomes a block-level element, you can control the width and height of the image in vain. Block-level elements: 1. display: block (directly occupying the entire row) 2. Float does not occupy the entire row, but you can control its width or height.
2, Some elements that cannot be contained or nested (Copied from W3C ):
A : Cannot contain other A tags.
Must not contain other A elements.
Pre : (Preformatted pre-defined format (text) cannot contain IMG, object, big, small, sub, or sup Elements
Must not contain the IMG, object, big, small, sub, or sup elements.
Button Button, which cannot contain input, select, textarea, label, button, form, fieldset, IFRAME, or isindex elements.
Must not contain the input, select, textarea, label, button, form, fieldset, IFRAME or isindex elements.
Label Cannot contain other label elements
Must not contain other label elements.
Form Cannot contain other form elements
Must not contain other form elements.