初学标准布局应该理解HTML标签的语义

======================================================
注：本文源代码点此下载
======================================================

如今web标准都被通俗地叫做“div+css”或者“标准布局”。我不反对这种便宜行事的叫法。但是这样会陷入一个误区:即 大量的使用div标签 作为结构元素。事实上这是一种更高级的div滥用(jeffrey zeldman在《网站重构》一书中提到)。

html为我们提供了相当丰富的标签,每个标签都有它各自的含义。我认为在设计时,除了遵循html语法以外,应该充分利用并遵守各标签的“语 义”。如标题文字应该包含在h1-h6中,大段的文字内容应该由

进行分段而不是

,列表项应该放在ul或ol或 dl中,表格形式的数据应该仍然用table布局。

为什么要这样做?一个很有说服力的原因是,保证在用户去掉css显示的情况下,网页能够尽量有效的将内容的结构层次显示出来。如果全部用div, 当去掉css之后,整个网页就失去了层次,只剩下一些杂乱的文字碎片。这并不符合web标准对低配置兼容性的要求。

我下面详细的列举一下我对一些标签的语义的理解:

p br

先说个最简单的。分段要用p标签而不是用br(甚至连续两个

)。这个似乎不用多说。但是有时候我们不得不放弃这个原则。 一个常见的例子是论坛发帖,如果我想分段,便打回车。而如此传输到后台并显示出来的,显然就是用

分段的。

table th

由于大力宣扬div+css的结果,似乎现在谁用table布局谁就是未开化的土著。但我认为这种观点是不正确的。table的含义是表格,因此凡 是应该以表格形式出现的数据,仍然应该用table布局。简单的例子是班级同学的花名册,包括姓名学号性别等等,这明显是一个表格形式的数据,因此应该 用table布局。另一个比较值得探讨的例子是,blog里面的日历导航。我曾经有见过一个blog程序,它的日历导航里的各个日期,从1号到30号全用 div套好,再使用float:left样式7个一排的排出当月的日历。当我取消浏览器的css显示之后,日历的那部分则从1号到30号一竖排下来。我认 为这是不对的。因为日历应该是一个表格形式的数据,因此仍然应该用table布局。当取消css之后,应该仍然按照一排7个的样子归成一个表格。

th则是另一个会被忽视的标签。由于css的万能,所有的表格单元都可以用td加一个class属性搞定。但是从语义上讲,一些表格单元应该用 th标签。比如上文说到的日历表格,里面的“mon tue wed… sun”这些标识星期的单元,就应该用th而不是td。

h1-h6

对于h1-h6标签,从语义上讲,它们应该适用于所有标题文字。因此,一些如

的写 法都是多余的,直接写成,然后直接对h1而不是.diary-title定义css,不是一样的效果么?当然,这个规矩我也不能定得 太死,因为有时候标题部分的结构元素并不能简单的用一个h1就能解决的。但我最多用类 似的方法将标题的结构嵌套得更复杂,以满足表现的需要。

但这里会出现一个语义上的分歧。h1究竟该理解为一级标题呢还是理解为1号字体大小的标题。我通常理解为一级标题,一级标题下再有小标题就用 h2。但是事实上回顾html设计之初,h1-h6后面的数字更多的被理解为控制标题文字大小的。用h3或许只是为了使用三号大小的字体,而并非它就是三 级标题。否则一级标题全用h1,个个都是斗大的字,又不得不用css来控制字号,感觉很累赘。所以,这是一个待商榷的问题。

ul ol

凡是需要罗列条款的,都应该用ul或者ol,而不是用p。比如招聘广告里的职位需求,比如注意事项,比如操作步骤说明。此外一个流行的用法是网页 的导航菜单也用ul li来列举,然后再用css控制其排列方式。

应该要补充的是,别忘了li里面还可以再用ul或ol,形成第二级列表。

dl dt dd

这是一组几乎被人忘记的标签,但jeffrey zeldman在《网站重构》中大力推崇对它们的使用。dl应该是 “defining list(或是definition list?有知道的朋友请告诉我)”的全称,一个典型的用法是字典的词条。单词的名字放在dt 里面,单词的解释放在dd里面。而alistapart.com网站更加高明的,将右侧栏整个定义为dl,每个单元的标题用dt,而该单元的内容则用 dd。

img

img标签本身也没啥好说的。只是想老生常谈一个,即只有当确实这个元素是内容里必须的图片的时候才使用img,否则应该用css定义为样式。如 插图,头像,表情图标,这些是内容里必须出现的图片,用img。而其他的比如标题的背景图,列表项前面的小icon,这些都不应该用img标签。

span

span如今大有和div并驾齐驱的风头。但是事实上我认为我们还是应该遵从它最初的使用。我个人的理解,span最初就是用来带class或者 style属性的。它本身不具有明确的语义。因此在文本流中,我们需要对某些文字做样式上的改变,就用span括起来。比如有些字需要加红,我就 用。

但是值得注意的是,这样又有可能犯之前h1里面提到的问题。因为有些文字的样式其实是有现成的标签的,比 如、等,我们也应该适当的给它们一些机会。

a

a是控制超连接的标签。但有些特殊的情况,我们不一定喜欢用它。比如需要弹出一个小窗口。我没怎么留心,但我想有些设计师会将onclick直接 定义到“播放”小图标的标签里。我个人认为还是应该在img外面加一个a,然后将onclick定义到a里面,并记住在js函数最 后写上return false。如果可以,该a标签的href属性也应该写上弹出窗口的url,保证用户在禁止js的情况下仍能够有效的打开页面。

暂时就列出这么多。最后再总结一下遵循html标签语义的重要性。web标准的其中一个要求是低配置的兼容性:当用户禁用图片、禁用css或禁用 js的时候,我们仍 能够让他有效的浏览网页内容。众所周知强制alt属性就是为禁用图片时的兼容性作考虑。而正确的遵循html标签的语义,则是保证禁用css时的兼容性。 只有当正确使用了html标签,我们的网页在“css裸奔”的时候,才会仍然让人看得出哪里是导航菜单,哪里是文章标题,日历表格也不会分崩离析。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/