Whether the semantics:html/xhtml really meet the standard

Original: http://jorux.com/archives/what-is-semantics/

Semantics can be translated into semantic (learning), which is an important part of whether html/xhtml really conforms to the standard. Jorux in this and everyone to discuss some of their views, if there are irregularities, but also asked you to correct me. In the West, why so many people so much attention to the semantics of the web, you may say that the West is more disciplined, pay attention to standards, but I would like to say, behind these appearances are " an invisible hand " control.

Here, give me an example of a navigation bar to illustrate my point. You should have seen a lot of navigation structures such as the following classes:

Home About blog Message album

They have a common feature, and there is a split bar "" to separate entries. To achieve the above effect of the navigation bar, its html/xhtml there are many ways to write, there are only a few more typical examples:

Example 1:

<p><a href= "home.html" > Home </a> <a href= "about.html" > About </a> <a href= "blog.html" > Blog </a> <a href= "message.html" > Message </a> <a href= "album.html" > album </a></p>

Example 2:

<ul>
<li><a href= "home.html" > Home </a></li>
<li></li>
<li><a href= "about.html" > About </a></li>
<li></li>
<li><a href= "blog.html" > Blog </a></li>
<li></li>
<li><a href= "message.html" > Message </a></li>
<li></li>
<li><a href= "album.html" > album </a></li>
</ul>

Example 3:

<ul>
<li><a href= "home.html" > Home </a> </li>
<li><a href= "about.html" > About </a> </li>
<li><a href= "blog.html" > Blog </a> </li>
<li><a href= "message.html" > Message </a> </li>
<li><a href= "album.html" > album </a></li>
</ul>

Example 4:

<ul>
<li><a href= "home.html" > Home </a></li>
<li><a href= "about.html" > About </a></li>
<li><a href= "blog.html" > Blog </a></li>
<li><a href= "message.html" > Message </a></li>
<li><a href= "album.html" > album </a></li>
</ul>

The above four navigation bar html/xhtml examples to illustrate semantics.
Example 1 uses the paragraph p as the semantic element identifier of the navigation bar (relative to the structural elements, such as Div, and so on). It is obvious that it has made a very typical mistake and mistakenly considered the navigation bar of the entry (list) as a paragraph.
The example 2,3,4 uses ul/li as the semantic element identifier of the navigation bar, which distinguishes between the position of the split bar "" and whether it appears in the html/xhtml.
With the presence of CSS, the ability to control appearances can make the appearance of the above four examples the same, without being perceived by the naked eye. But this is just a symptom, as the search engine's internet status increases, and XML usage and importance increase, they as robot, read only html/xhml/xml source code, and do not read CSS, which means they care more about the actual meaning of your Web page, rather than your Web page good-looking or not. That is, to make your Web page conform to semantic specifications, is to let these robot better read your Web page, improve your site in search results ranking, to gain greater benefits, this invisible hand determines the importance of the west to semantics, or even more than the Web page through the detection of the importance of the world.

I personally think that the meaning of semantics is:
CSS removal, your Web page performance is still standard, understandable.

This rule allows you to achieve a degree of uniformity in the logic of your eyes and robot. Using the above theory, the mistakes made in Example 1 are easier to understand, and the key words in the entries are more valuable than the keywords in the paragraphs. Why do you use paragraphs when you have a content that is originally an item?!

In the case of 2,3,4 , how can the divider be so important.

In the example 2,3 is only the difference of position, now does not use any CSS to control the appearance, then its html/xhtml performance difference is obvious, the reader may try. In Example 2 , the split bar would occupy four Li alone, and five Li would have become nine. For example, a five-person company is now nine, and everyone's shares are diluted by half, and the importance of each shareholder is certainly diminished. More importantly, there are four shareholders who are exactly the same. Robot may think the four shareholders () are more important and reduce the importance of other shareholders (key words). In Example 3, to make the divider the original shareholder's secretary, naturally does not affect the importance of keywords.
From the appearance consideration, is also example 3 superior to Example 2 performance, in Example 2 separates the divider to occupy one row alone, is puzzling.

In example 4 , no divider is used, which is better in semantics. The performance of the separator bar can be easily implemented in CSS with a picture background, and like this type of monochrome separator, in GIF format, only a few bytes, does not affect the download speed.

Above is Jorux in with the Western Exchange, unifies the user feedback, obtains some experience experience. If you have a different point of view or problem, despite the brick.

Hope that this will arouse the attention of mainland friends, pay attention to the use of h1/h2/p/ul/li/blockquote/table and other semantic elements of the use and norms, do not abuse the structure elements such as Div , robot is not too close to such elements. For example, strictly speaking a single page, only allow one H1, is your Web page title,h1 in robot position second only to <title></title>.

Note: It has been forgotten when the last update, so update speed, has made me almost want to give up. Originally thought, this half-dead state of the website, will gradually be forgotten, but feed subscriptions are climbing, which makes me doubt FeedBurner counter is not out of the fault.
I can talk to comfort is this Write articles, not Blog postings, Jakob Nielsen, the study of the authority of the interactive interface apparently found its snail-speed rationality. You can subscribe to this person's alertbox.