Do you really understand HTML? Starting with "latest flash"

Wedge
The blog Park is currently integrating flash and blogs. I have been playing with Bo PI recently, so I followed the integration results. I have to say that the final html generated by garden is quite non-standard, semantic disorder, or a lot of redundancy. It may be called div obsessive-compulsive disorder/class obsessive-compulsive disorder.

Semantics of HTML
I don't know when to start. The layout of the Table began to be deprecated by Chinese people, and the layout of div + css began to be popular. no matter which one leads the trend, our goal is the same. "Make html more concise and readable."

More concise, meaning removing unnecessary redundancy, separating content and presentation, and clearing tags purely for layout.
More readable means to improve the semantics of html and let html explain what it means.
What are the benefits of doing so?

Concise, with loose coupling between content and display, this facilitates division of labor, maximizes the use of the web cache mechanism, reduces network traffic, and accelerates page rendering.
Readable, making the content structure clearer and easier to understand by various terminals (such as blind screen readers and search engine crawlers ).
Block-level Elements (Block-level element) VS Inline Elements (Inline element)
In the Html specification, this is said (the difference between the [Quicky] block and inline from brown bear kids shoes ?)

All elements that are allowed to be contained by the BODY element are either block-level or Inline. They can be counted as block-level or inline. But there is absolutely no element that can be contained by the BODY, that is, it is not a block-level, not an inline element.
Common block-level elements include DIV, FORM, TABLE, P, PRE, H1 ~ H6, DL, OL, UL, etc.
Common inline elements include SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, and BR.
In addition, the SCRIPT, OBJECT, MAP, BUTTON, DEL, and INS elements can be both block-level elements and inline elements.

What are the differences between block-level elements and inline elements? It is embodied in the following aspects:

Generally, block-level elements can contain block-level elements and inline elements, but inline elements can only contain inline elements. Note that each specific element can contain specific elements, so this rule is not applicable to individual elements.

For example, P elements can only contain inline elements, but cannot contain block-level elements.

<! -- This is not compliant with the specifications -->
<P> <div> balalbalabala </div> </p>
<! -- This is permitted by the specifications -->
<P> <span> balalbalabala </span> </p>

For more information, see the difference between [Quicky] block and inline of brown bear kids shoes?

Why div + css layout
Defining the pursuit of semantics as "div + css layout" is actually narrow. I think its complete statement should be "semantic tag + css layout, semantic tag organization content ". we know that most html tags have their own semantics. for example, p is a paragraph, and br is a line break. You cannot use p for line breaks or use br for paragraphs. This will lead to confusion in the semantics of html. div and span are exactly two non-semantic tags in html. but span is an inline element, so it is not suitable for containers. div is a block-level element, so it is undoubtedly the best choice for layout, it also comes with "div + css layout.

Div obsessive-compulsive disorder/class obsessive-compulsive disorder
In the integration of the first version, the html structure of the latest flash memory is roughly as follows:

<Div class = "day">
<Div class = "dayTitle">
</Div>
<Div class = "my_ing">
A good discussion atmosphere is the most basic condition for a good company. <a class = "ing_lnk" href = "http://home.cnblogs.com/ing/58955/"> 10-30 </a>
<Br> economic crisis, re-reclamation of Three-acre land... <a class = "ing_lnk" href = "http://home.cnblogs.com/ing/58457/"> 10-28 </a>
<Br>
Learning is a reincarnation, re-going ing... <a class = "ing_lnk" href = "http://home.cnblogs.com/ing/32400/"> 06-01 </a>
<Br>
<A class = "ing_lnk" href = "http://home.cnblogs.com/walkingboy/ing/ </span>"> more... </a>
</Div>
</Div> first, the latest flash memory is placed in the post list container, and the same container class ID is used, which makes it difficult to locate css.
Next, the br is used for listing,
Again, more link and list item are confused.
I originally wanted to adjust css for my blog and found that the structure was dizzy. Then I sent a suggestion that the html position and structure of the flash memory should be the same as that of Post, it's hard to modify the skin.

I have to say that the response speed of the garden team is still acceptable. It was updated last night. Let's look at the html structure of the second version.

Code <div id = "side_ing_block">
<H3 class = "catListTitle"> latest flash <Div class = "side_ing_list">
<Ul>
<Li> a good discussion atmosphere is the most basic condition for a good company. <a class = "ing_lnk" href = "http://home.cnblogs.com/ing/58955/"> 10-3014: 44 </a> </li> <li> economic crisis, reclaim an acre of land in three minutes ...... <a class = "ing_lnk" href = "http://home.cnblogs.com/ing/58457/"> 10-2813: 45 </a> </li>
<Li> learning is a reincarnation, re-going ing... <a class = "ing_lnk" href = "http://home.cnblogs.com/ing/32400/"> 06-012</a> </li> <a class = "ing_lnk" href = "http://home.cnblogs.com/walkingboy/ing/ </ span> "> more flash memory... </a> </li>
</Ul>
</Div>
</Div> good, the semantics has been modified, but there are still too many redundant tags.

In the past, Cat Chen wrote an article about <table/> obsessive-compulsive disorder?

I think we can say that the above html has strong <div/> obsessive-compulsive disorder + class obsessive-compulsive disorder. Why.

<Div/> obsessive-compulsive disorder + class obsessive-compulsive disorder

<Div id = "side_ing_block">
<H3 class = "catListTitle"> latest flash <Ul>
<Li> a good discussion atmosphere is the most basic condition for a good company. <a class = "ing_lnk" href = "http://home.cnblogs.com/ing/58955/"> 10-3014: 44 </a> </li> <li> economic crisis, reclaim an acre of land in three minutes ...... <a class = "ing_lnk" href = "http://home.cnblogs.com/ing/58457/"> 10-2813: 45 </a> </li>
<Li> learning is a reincarnation, re-going ing... <a class = "ing_lnk" href = "http://home.cnblogs.com/ing/32400/"> 06-012</a> </li> <a class = "ing_lnk" href = http://home.cnblogs.com/walkingboy/ing/> more flash... </a> </li> <! -- Not the same item. How can I merge it into the same list? Css is hard to locate, regardless of semantics or definitions like this -->
</Ul>
</Div>
</Div> I personally think the better structure of the html part of "latest flash" should be

Code <div id = "side_ing_block">
<H3> latest flash <Ul>
<Li> <a href = "http://home.cnblogs.com/ing/58955/"> a good discussion atmosphere is the most basic condition for a good company. 10-30 </a> </li>
<Li> <a href = "http://home.cnblogs.com/ing/58457/"> economic crisis, re-reclamation of a Three-acre land... 10-28 </a> </li>
<Li> <a href = "http://home.cnblogs.com/ing/32400/"> learning is a reincarnation, re-going ing... 06-01 </a> </li> </ul>
<Span> <a href = http://home.cnblogs.com/walkingboy/ing/> more flash... </a> </span>
</Div>

Of course, we are looking at this section of html in an isolated way. If we put it into the structure of the entire page, we still need to modify it as appropriate. For example, <div id = "side_ing_block"> should be changed to <div id = "side_ing_block" class = "block">. block is a basic style of the page block structure, however, the div in the left menu of the garden is independent and does not abstract a basic style class. Therefore, every time a module is added, all the skins must be modified. And span should also add a class = "more". These are not the scope of html semantics, but the design of css reuse. They are not discussed in this article.

With the gradual disappearance of <table/> obsessive-compulsive disorder, we should be vigilant against <div/> obsessive-compulsive disorder. class obsessive-compulsive disorder keeps rising, and we will never stop pursuing standards, but we cannot lose ourselves.

Author: Chen dayI