什么是Semantics?
作者:Jorux 来源:Jorux博客 发布时间:2008-04-16 13:45:00
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。
毕竟我下星期就开始正式工作了,其内容绝不会和网页搭上边,使我更加怀疑自己的更新能力。但,如果那天真的停止更新了,一定会和大家说声再见。
猜你喜欢
- 请问如何用OleDbDataAdapter来对数据库进行删除、修改和添加?OleDbDataAdapter是DataSet和数据源之间建立联
- 学习JQUERY就应该从最基本的学起,基本的就应该是语法了,在这里,我们有必要先温习一下JAVASCRIPT的一些知识。语法就不用说了,都是
- up.htm'::::::: 此程序属扬子原创 ::::::::::::::::::':::::: 在sql2000,200
- ISNULL 使用指定的替换值替换 NULL。 &nb
- 环境:RHEL 5.4 x86 , oracle 11.2 1.设定环境变量 在/home/oracle编辑 # .bash_profile
- 通常,当一个页面有太多信息要显示,而一页塞又不下所有信。为了请求速度、美观以及其他的各种理由,分页就会被我们请过来。让我们的用户可以选择是否
- 基本的网站页面设计元素布局比例统计,给大家做个参考,看看您的网站是否和下面的统计一致:标志图案:位置统计结果左上角84%右上角6%上方居中6
- YUI Compressor 压缩 JavaScript 的内容包括:移除注释移除额外的空格细微优化标识符替换(Identifier Rep
- 1、首先停止正在运行的MySQL进程 Linux下,运行 killall -TERM mysqld Windows下,如果写成服务的 可以运
- 【ThinkPHP版本查询】dump(THINK_VERSION);模板获取get参数{$Think.get.pageNumber}或者$R
- 最近关于HTML5吵得火热,很多人认为HTML5出现会秒杀Flash,以至于在各大web前端开 * 坛吵得不可开交。论坛里三言两语说的不够 尽
- 在mysql安装目录的bin下, 运行mysql --install MYSQL5查看服务中, 会多一个MYSQL5的服务XAMPP的控制面
- 在一行内声明CSS,对比下面两个:h2 {font-size:18px; border:1px solid&n
- 上一课:ACCESS入门教程:初识Access 2000窗口接口简介 通过上一课的学习,你是否感觉Access的窗口和接口还有点搞不清楚,对
- 本文详细列出了HTML中使用到的各种鼠标事件,如onclick,onmouseover等;页面相关事件如:onerror,onload等;h
- 本文给出了MySQL数据库中定义外键的必要性、具体的定义步骤和相关的一些基本操作,供大家参考!定义数据表假如某个电脑生产商,它的数据库中保存
- 希腊Web 设计师Christos Chiotis 发表在 CssGlobe 的一篇文章,讲述了黄金分割率在 CSS 中的应用。黄金分割率是
- CSS 盒模型网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,请看下图:如果是 Firebug 用户的话(基本和前端有关的
- 今天编ZBlog上传模块的时候,需要用到一个提取文章中文件名的子程,开始我把问题想复杂了,匹配了所有可能的文件名,不仅正则表达
- 在进行数据库的查询时,会经常遇到这样的情况:例如想在一个用户数据库中查询他的用户名和他的密码,但恰好该用户使用的名字和密码中有特殊的字符,例