Shulou(Shulou.com)06/03 Report--

This article will explain in detail about whether the Html/Xhtml in Semantics really meets the standard. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Semantics can be translated into semantic, which is an important part of whether Html/Xhtml really conforms to the standard or not. Jorux is here to discuss some of his own views with you. If there is anything wrong, please correct it. In the West, why do so many people attach so much importance to the Semantics of the web? you may say that the West is more disciplined and attaches importance to standards, but what I want to say is that behind these appearances, there is an "invisible hand" to control.

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

Home page | about | blog | message | album

They all have something in common: they all have a splitter bar "|" to separate the items. To achieve the above effect of the navigation bar, there are many ways to write its Html/Xhtml, here are only a few typical examples:

Example 1:

Home page | about | blog | message | album

Example 2:

Home page

| |

About

| |

Blog

| |

Leave a message

| |

Photo album

Example 3:

Home page |

About |

Blog |

Leave a message |

Photo album

Example 4:

Home page

About

Blog

Leave a message

Photo album

The above four navigation bar Html/Xhtml examples are given to illustrate Semantics.

Example 1 uses paragraph p as the semantic element identification of the navigation bar (as opposed to structural elements, such as div, etc.). Obviously, it made a typical mistake, mistakenly regarding the navigation bar that was originally an item (list) as a paragraph.

Example 2, ul/li, 3 and 4 all use ul/li as the semantic element identification of the navigation bar, and their difference lies in the location of the splitter bar "|" and whether it appears in the Html/Xhtml.

Due to the existence of CSS, using its ability to control appearance, the appearance of the above four examples can become exactly the same without being detected by the naked eye. But this is only the appearance, with the improvement of the Internet status of search engines, and the increase in the frequency and importance of the use of XML, as Robot, they only read the Html/Xhml/XML source code rather than CSS, which means they care more about the actual meaning of your page than whether your page looks good or not. That is to say, to make your web pages conform to semantic norms is to make these Robot better understand your pages, improve your site's ranking in search results, and gain greater benefits. this invisible hand determines that the West attaches importance to Semantics, even exceeding the importance of whether the page has passed the W3C test or not.

Personally, I think the meaning of Semantics is:

Remove CSS and your web performance is still standard and easy to understand.

This rule can unify your naked eye and Robot logic to some extent. Using the above theory, the mistakes made in example 1 are easier to understand, and the keywords in the entry are more valuable than those in the paragraph. Why use paragraphs for a content that is originally an entry?!

So why is the separator so important in example 2, 3 and 4?

In example 2, CSS 3 is just a difference in location. Now you don't use any Html/Xhtml to control the appearance, so the difference in Html/Xhtml performance is obvious. Readers can try. In example 2, the splitter bar occupies four li separately, from five li to nine. For example, a company of five people has now become a company of nine people, everyone's shares have been diluted by half, and the importance of each shareholder will of course be weakened. What is even more fatal is that four shareholders are exactly the same. Robot may think that those four shareholders (|) are more important, while reducing the importance of other shareholders (keywords). In example 3, making the divider the secretary of the original shareholder naturally does not affect the importance of the keyword.

From the point of view of appearance, it is also the performance that example 3 is better than case 2, in which the divider occupies a separate line, which is puzzling.

Then in example 4, no separator is used, which is semantically better. The performance of the separator bar can be easily achieved with a picture background in CSS, and a monochromatic separator like this type, in gif format, is only a few bytes, which does not affect the download speed.

These are some of the experiences gained by Jorux in communicating with Westerners, combined with user feedback. If you have different views or questions, feel free to clap the bricks.

Hope to attract the attention of friends in mainland China, attach importance to the use and standardization of semantic elements such as h2/h3/p/ul/li/blockquote/table, and do not abuse structural elements such as div. Robot is not very close to such elements. For example, strictly speaking, a single web page is only allowed to appear H2 once, which means that your web page title,h2 is second only to Robot.

Note: I have forgotten when the last update was, so fast that I almost want to give up. I thought that this kind of half-dead site would gradually be forgotten, but the subscription volume of Feed is rising, which makes me wonder if there is something wrong with Feedburner's counter.

This is the end of the article on "does the Html/Xhtml in Semantics really meet the standard?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.