什么是Semantics?
Author: Jorux/Bluecssr
Posted on: July 29, 2007
Filed under: Web Design
Comments: 41 Responses
keywords: Html/Xhtml
FontSize: + Increase - Decrease
Trackback: URL(copy the link)- edit
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的计数器是不是出了故障。
能让我聊以慰藉的就是这篇Write Articles, Not Blog Postings，Jakob Nielsen这位研究交互界面的权威显然找到了其蜗牛式速度的合理性。大家可以订阅一下此人的Alertbox。
毕竟我下星期就开始正式工作了，其内容绝不会和网页搭上边，使我更加怀疑自己的更新能力。但，如果那天真的停止更新了，一定会和大家说声再见。
【完】
好文，收藏慢慢琢磨。
希望jorux会一如既往的继续， come on..
我觉得还有一个要注意的领域就是移动设备浏览器，现在的移动设备浏览器有很多会对页面做大规模的精简以节约流量和加快速度，一般的wap浏览器也根本不支持css。
在关闭CSS时保持页面一致性和不变性，我想你后面提到的那位Jakob Nielsen真是把这个做到家了，那个stylesheet真是精简啊。
我想你不需要太在乎这个更新的问题吧，就算你不写web设计，谈谈养生医疗也不错啊，到目前为止我还没见过一个谈这种话题的blog。毕竟你最终还是个医生嘛。
To leavic:
谢谢leavic的建议！现在大家都不太重视无css下的网页表现，在这里提个醒。
关于更新，确实是个问题.
要是本人能写医疗小说就好了:)
医疗小说，国外有这种小说吗？至少在国内我没读过。
不过你应该不是学法医的，不然应该有很多可以写了，写恐怖小说，哈哈。
本人非法医，不过恐怖是可以涉及的。
医疗小说就是类似急诊室的故事之类。
我得练练，是该写写医疗相关了。
为何网页字变得如此之大？
个人建议：坚持走下去为好~~~
To 树脂毅:
字体每变，可能是你的浏览器设置不同。
请问下你经常上的外国站点都有那些啊？可否给推荐几个？谢了
To stonyIt :
推荐digg.com。你可以从那里出发，发现其他的国外资源。
hi,jorux
好久不见,还好吗..
看你这也少有更新了-_-!
更新下友链,偶换地方了/
其实应该说复活了,呵呵
http://blog.imyl.com
不错！好久没你消息了，回来就好！哈哈
发给你的EMAIL收到了吗?
关于wordpress风格大赛的事情
很久没来了 ， 看来你依然在前进 bless 欧要去读
software engineering 了
To 笨小孩:
那就好，还能看到你的留言，真是意外。
software engineering 前途不错啊！
有空常来！
呵呵，”医疗小说”，这主意不错，期待
呵呵，最近也想做一个技术的blog，正在筹备中！！！
To 班马萧萧:
弄好了，记得通知一声！
别停止~~
即使再慢也是一种持续行进的状态.
没有文章的日子, 就象是冬眠似的休息吧. 为了更好的生存…
Alertbox怎么订阅啊？？？
To 林强 :
在这里http://www.useit.com/alertbox/subscribe.html订阅。
啊，jorux你的教程真是太棒了。
最近正好要做一个网站，从你这里学到很多东西。
再次感谢。
想问个问题，我想订阅你blog的rss。但是为啥总是验证错误？
用了马桶跟ff的sage都不行。。@_@
To Kuro :
是Feedburner出了问题。原因待查。
推荐用邮件订阅！
最近忙着什么。。
像蒸发了一样！
To leizi:
最近工作比较忙，没时间打理网站。leizi如何？
工作不是很忙～但却没心情搞这些东西了～
乱七八糟一摊子琐事，也是烦！
怀念学生时代了，“两耳不闻窗外事”，真是个清净！
To leizi :
我也是，再也没有以前那样的“闲来无事写博客”的光景。不过，我还是要找机会再写点什么的，辛辛苦苦经营的自留地，不想就这样荒芜。
受益匪浅。
很赞赏你的看法，不过我还见过第五种写法，是这样子滴：
首页 | 关于 | 博客 | 留言 | 相册
你觉得怎样呢？呵呵！
哦，貌似html被支持了，写多一次，
[map][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][/map]
[ =
你看问题很透彻。受益匪浅的感觉哦
支持你 希望你能够继续写下去！
我现在也是从事网页设计方面的工作
感觉自己还要走的路很长
To iVane Hwang:
[map][/map]不错，能够提升关键词重要性，只是少了点ul/li对“表现”的控制能力。
谢谢你的见解！
To Wendy:
建议所有的中国网页设计师先从平面设计学起，只有Design和创意上了档次，中国的网页设计才有出路！
祝你成功！
嘿嘿 今天上来就看到你的回复 高兴哦 我又来啦 我就是平面设计出生的 但是往往是你做的东西客户不认可，老改七改八
今天研究了下digg 的前台设计 看到他们的图标全部集合到一个图片上 这个是怎么做哦？期待你的回复
To Wendy:
我看了看Digg主页，他们的图标并没有集合到一个图片，不知你指的是什么。
看你的文章很受启发，希望你能坚持下去。虽然今后的工作与网页没有关系（暂时这么说，嘿嘿），但只要还有兴趣，就不要停下，要一直跑下去。祝工作顺利。
To daviart :
谢谢你的鼓励，其实我也在找机会更新，只是对文章要求比较高，暂时没有好的话题。
有的哦 你在“All”上右击背景另存为 有个menu-current 的gif图片里有整个站的小图标 背景之类的！
还有博主怎么不勤奋点呢？^_^
To wendy:
哦， 它只是集成了menu的current时的小图标，由于这些图标体积小，放在一块也不会增加总体积。
而且放在一块能加快反应速度，因为只需要loading一次，就能把这些图标下载下来，避免了每次鼠标指向一个图标就会请求一次图片下载。
由于工作的原因，实在是没有在网络上勤奋的时间。
这是个非常不错的学习网站，继续。。。。。
老实说，我很少在别的博客停留。但是你这个博客的内容以及你的精神打动了我。工作和兴趣毫不相关是令人很沮丧的事情，我也在找工作了，大概也是会背离自己的兴趣。希望你能将自己的兴趣坚持下去。