Do you know the intent of HTML Tag design?

The word "DIV + CSS" does not know how many people are harmed. Maybe the author's intention is correct, but the followers misinterpret 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 do not understand HTML and what the load is, and code writers often do not understand "SEO technology", which may cause a considerable career bottleneck, these two occupations do not learn from each other and do their best.

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, see examples (in addition to 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 (separated, separated, differentiated, allocated, and bounded Line). Labels can divide documents 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) and li elements are combined into groups.
• Ol: ordered list (ordered list) and li elements are combined into groups.
• Li: list item (list item) "must" be in the parent ul or ol container. This must be added by myself. I added an must before it to indicate the seriousness of the problem.
• Dl: definition list (definition list) and dt (Project defined by definition term) and dd (description defined by definition description) are combined into a group.
• P: paragraph (Section) is used to store a section of an article.
• Span: The Span label is used to combine the content of a section in a 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 represents its meaning, unlike the
• Label: Label (a label for a Form Control). Its name is a Label, but here, w3c defines it as a form description, for example, we like to add the input label before or after it.
• Em: Emphasized (emphasis) to emphasize the text it contains. 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: indicates the text contained by Strong, which is enhanced and emphasized. 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 (Image, Image );
• A: Anchor (Anchor) creates the basic chain in the hyperlink.
• U: UnderLine (Text UnderLine), will be eliminated soon.
• 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 are: 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.

Note the following:

1. inline elements, they are not "framed" themselves, that is, their size is controlled by their content. Before they become block-level elements, 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.
• The button cannot contain the 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.