Semantics: Is Html/Xhtml really standards-compliant?

<br />Original text: http://jorux.com/archives/what-is-semantics/
Semantics can be translated as semantics (science), which is an important part of whether Html/Xhtml truly complies with the standards. Jorux is here to discuss some of his own views with everyone. If there is anything inappropriate, please correct me. Why do so many people in the West attach so much importance to semantics on web pages? Maybe you will say that the West is more rule-abiding and attaches importance to standards, but what I want to say is that behind these appearances there is an " invisible hand " controlling them.
Here, let me take an example of a navigation bar to illustrate my point. You must have seen a lot of navigation structures like the following:
Home | About | Blog | Message | Album They all have a common feature, there is a separator bar "|" to separate each entry. To achieve the above effect of the navigation bar, there are many ways to write Html/Xhtml. Here are just a few 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">Leave a 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”>Leave a 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">Leave a message</a></li>
<li><a href=”album.html”>Album</a></li>
</ul>
The above are four navigation bar Html/Xhtml examples for explaining Semantics.
Example 1 uses paragraph p as the semantic element identifier of the navigation bar (as opposed to structural elements such as div, etc.). Obviously it made a typical mistake, mistaking the navigation bar, which was originally an item (list), for a paragraph.
Examples 2, 3, and 4 all use ul/li as the semantic element identifiers of the navigation bar. The only difference between them is the position of the separator "|" and whether it appears in Html/Xhtml.
Thanks to the existence of CSS, and its ability to control appearance, the appearance of the above four examples can be made exactly the same without being noticed by the naked eye. But this is just an appearance. As search engines gain more status on the Internet and XML becomes more frequently used and more important, they, as robots, only read Html/Xhml/XML source code but not CSS. That is to say, they care more about the actual meaning of your web page rather than whether it looks good or not. In other words, making your web pages conform to semantic standards means that these robots can better understand your web pages, improve your website's ranking in search results, and gain greater benefits. This invisible hand determines the West's emphasis on Semantics, which is even more important than whether a web page has passed W3C testing.
I personally think that the meaning of Semantics is:
Remove CSS and your web pages will still look standard and easy to understand.
This rule can bring your naked eyes and the Robot's logic into a certain degree of unity. Using the above theory, the mistake made in Example 1 is easier to understand. The keywords in the entry are more valuable than the keywords in the paragraph. Why does a content that is originally an article need to use paragraphs? !
So why is the separator so important in examples 2, 3, and 4 ?
The only difference between Examples 2 and 3 is the position. Now without any CSS to control the appearance, the difference in Html/Xhtml expression is obvious. Readers can try it. In Example 2 , the splitter will occupy four li elements alone, and the original five li elements will become nine. For example, a company of five people now becomes a company of nine people. Everyone’s shares are diluted by half, and the importance of each shareholder will certainly be weakened. What’s even more terrible is that four of the shareholders are exactly the same. The Robot may consider those four shareholders (|) to be more important and reduce the importance of other shareholders (keywords). In Example 3, making the separator a secretary of the original shareholder will naturally not affect the importance of the keywords.
From the appearance point of view, Example 3 is better than Example 2. In Example 2 , the separator bar occupies a single line, which is puzzling.
Then in Example 4 , no separator is used, which is semantically better. The appearance of the separator bar can be easily achieved in CSS using an image background. Moreover, a single-color separator bar like this type only takes up a few bytes in gif format, which does not affect the download speed.
The above are some of the insights that Jorux gained from communicating with Westerners, combined with user feedback. If you have different opinions or questions, feel free to criticize.
I hope this will draw the attention of our mainland friends, and encourage them to pay attention to the use and standardization of semantic elements such as h1/h2/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, only one h1 is allowed on a single web page, which is the title of your web page. The status of h1 in Robot is second only to <title></title>.
Note: I have forgotten when the last update was. The update speed is so fast that I almost want to give up. I thought that such a half-dead website would gradually be forgotten, but the number of subscriptions to the feed is climbing, which makes me wonder if there is something wrong with the Feedburner counter.
What can comfort me is this article Write Articles, Not Blog Postings. Jakob Nielsen, an authority on interactive interfaces, has apparently found the rationality of his snail-like pace. You can subscribe to this person's Alertbox.

<<: CSS3 flip card number sample code

>>: A permanent solution to MYSQL's inability to recognize Chinese

Docker dynamically exposes ports to containers

Semantics: Is Html/Xhtml really standards-compliant?

Docker dynamically exposes ports to containers

How to configure SSL certificate in nginx to implement https service

The principles and defects of MySQL full-text indexing

Mariadb remote login configuration and problem solving

What should I do if I want to cancel an incorrect MySQL command?

Implementation of Nginx configuration and access to local static resources in Mac environment

How to purchase and install Alibaba Cloud servers

jQuery plugin to implement stacked menu

6 ways to view the port numbers occupied by Linux processes

Detailed explanation of the buffer pool in MySQL

Recommend

Implementation of Vue single file component

Solution to the problem that VC6.0 cannot be used when installed on WIN10

Implementing carousel with native JavaScript

Tutorial on how to modify element.style inline styles

How to solve the problem that the website does not allow direct copying of page content or information

Analysis of the pros and cons of fixed, fluid, and flexible web page layouts

Native JavaScript carousel implementation method

What hidden attributes in the form can be submitted with the form

How to set static IP in CentOS7 on VirtualBox6 and what to note

Collection of 25 fonts used in famous website logos

Detailed explanation of the difference between url ending with / and without / in nginx proxy_pass configuration

mysql installer community 8.0.12.0 installation graphic tutorial

Native JS to implement the aircraft war game

Implementation of MySQL Multi-version Concurrency Control MVCC

Native JavaScript to achieve skinning