原文：http://jorux.com/archives/what-is-semantics/

Semantics可翻译为语义的(学)，它是Html/Xhtml能否真正符合标准的重要一环。Jorux在这和大家讨论一些本人的观点，如有不妥之处，还请各位网友指正。在西方，为什么这么多人如此注重网页的Semantics，也许你会说，西方比较守规矩，注重标准，但我想说的是，在这些表象的背后有着“一只无形的手”控制着。

在此，举个导航条的例子来说明我的观点。大家应该看见过很多诸如下类的导航结构：

首页 关于 博客 留言 相册

它们有着共同的特点，都有分割条“”将各个条目分开。要实现以上效果的导航栏，其Html/Xhtml有很多种写法，在此仅具几个比较典型的例子：

例1：

<p><a href=”home.html”>首页</a> <a href=”about.html”>关于</a> <a href=”blog.html”>博客</a> <a href=”message.html”>留言</a> <a href=”album.html”>相册</a></p>

例2：

<ul>
<li><a href=”home.html”>首页</a></li>
<li></li>
<li><a href=”about.html”>关于</a></li>
<li></li>
<li><a href=”blog.html”>博客</a></li>
<li></li>
<li><a href=”message.html”>留言</a></li>
<li></li>
<li><a href=”album.html”>相册</a></li>
</ul>

例3：

<ul>
<li><a href=”home.html”>首页</a> </li>
<li><a href=”about.html”>关于</a> </li>
<li><a href=”blog.html”>博客</a> </li>
<li><a href=”message.html”>留言</a> </li>
<li><a href=”album.html”>相册</a></li>
</ul>

例4：

<ul>
<li><a href=”home.html”>首页</a></li>
<li><a href=”about.html”>关于</a></li>
<li><a href=”blog.html”>博客</a></li>
<li><a href=”message.html”>留言</a></li>
<li><a href=”album.html”>相册</a></li>
</ul>

以上为说明Semantics而举的四个导航条Html/Xhtml例子.
例1使用了段落p作为导航条的语义元素标识(绝对于结构元素，诸如div等)。很显然它犯了很典型的错误，错误的把本来是条目(list)的导航栏看成了段落。
例2,3,4都使用了ul/li作为导航栏的语义元素标识，它们的区别进在于分割条“”的位置，以及能否在Html/Xhtml中出现。
由于CSS的存在，利用其控制表象的能力，可以将以上四个例子的外表变得如出一辙，而不被肉眼察觉。但是这只是表象，随着搜索引擎的互联网地位提升，以及XML的使用频率和重要性添加，它们作为Robot，只读Html/Xhml/XML源代码，而不读CSS，也就是说它们更在乎你的网页的实际含义，而不是你的网页好看与否。也就是说让你的网页符合语义规范，就是让这些Robot更好的读懂你的网页，提高你的网站在搜索结果中的排名，获得更大的利益，这只无形的手决定了西方对Semantics的注重，甚至超过网页能否通过W3C的检测的重要性。

我团体认为的Semantics的含义就是：
将CSS去除，你的网页表现仍然规范，易懂。

这条法则，能让你的肉眼和Robot的逻辑达到某种程度的统一。利用以上理论，在例1中犯的错误，就比较容易理解，条目中的关键词比段落中的关键词，更具价值。一个本来是条目的内容为什么还要使用段落？！

那么例2,3,4中，分隔条怎样会如此重要。

在例2,3之中只是位置的区别，如今不用任何CSS来控制表象，那么其Html/Xhtml表现的区别是不言而喻的，读者可以试试。在例2中，分割条会单独占据四个li，本来五个li变为了九个。打个比方，一个五团体的公司如今变为了九团体的，大家的股份被稀释了一半，每个股东的重要性当然会被减弱。更要命的是有四个股东竟然是如出一辙的。Robot可能会认为那四个股东()更为重要，而降低了其他股东(关键词)的重要性。在例3中，使分隔条成为原来股东的秘书，自然不会影响关键词的重要性。
从表象考虑，也是例3优于例2的表现，例2中分隔条单独占据一行，让人隐晦。

那么例4中，没有使用分隔条，其在语义学上更优。分隔条的表现，可以在CSS中用图片背景轻松实现，而且像这品种型的单色分隔条，用gif格式的话，只要几个字节，不影响下载速度。

以上是Jorux在跟西方人交流中，结合用户反馈，得到的一些心得体会。大家如有不同观点或是问题，虽然拍砖。

希望以此惹起各位大陆朋友的注重，注重使用h1/h2/p/ul/li/blockquote/table等语义元素的使用和规范，不要滥用div等结构元素，Robot是不太亲近此类元素的。比方说，严厉意义上说单个网页，只允许出现一次h1，就是你的网页title，h1在Robot中的地位仅次于<title></title>。

注：曾经忘了上次更新是什么时候了，如此更新速度，曾经让我几乎想放弃。原以为，这种半死形状的网站，会逐渐被遗忘，但是Feed的订阅量却在攀升，这让我怀疑Feedburner的计数器是不是出了毛病。
能让我聊以慰藉的就是这篇