标题(h1–h6)最头痛的事:平衡语义和搜索引擎优化

html语义化,是现在谈论得比较多的话题。那何谓html语义化,简单的说吧,就是要有良好的html结构,在剥离css后,依然能读懂一个页面的结构,能分清哪些是标题,哪些是内容。切忌不要用css让一个标签去表现另一个标签。

而在语义化的过程中,重点和难点在于h(x)标签,h(x)的语义是标题,一个语义良好的页面,h标签应该是完整有序没有断层的。也就是说,要h1,h2,h3,h4这样推下来,不要h1,h3,h4,漏掉h2。一个结构良好的网页,h标签可以组织起一个网页的大纲。

Web内容可访问性指南(WCAG)里提到了这方面的内容:

[I]n HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not “skip” levels (e.g., H1 directly to H3).

对于h1标签,一般一个网页只有一个,而h2–h6,一个网页可以有多个。就像一篇文章,只有一个标题,但可以有很多子标题或副标题。

而h1的使用,对于很多人很困惑。一个页面只能出现1次h1, 那对于网站来说,h1是用于网站名称呢还是文章标题?

正确的做法是:对于首页,h1用于网站名称,对于其他页面,h1用于相应的栏目标题或文章标题。而在非首页,网站名称推荐用<div>,<strong>,<h2>等标签。

具体做法,可以参考wordpress3.0 + 版本,在wordpress3.0以前的版本,h1在整个网站中都是用于网站名称,而在wordpress3.0以后的版本,已经修复了这个问题。

关于(hx)标题标签的使用建议:

  • 对于任何可能或“感觉”像是标题的内容,使用hx标签。
  • 一个页面只用一个h1标签,并把它做为文档、文章、页面的主题,而不是用于网站名称或logo。
  • 如果页面的某个模块属于标题,那可根据页面结构使用h2–h6标签,但不要“跳级”。例:尽量不要h1之后就直接用h3,而跳过h2标签。

例子:一个典型的3栏结构的页面,W3C建议的结构(本例来源:http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H42

<head>
 <title>Stock Market Up Today</title>
 </head>

 <body>

 <!-- left nav -->
 <div class="left-nav">
 <h2>Site Navigation</h2>
 <!-- content here -->
 </div>

 <!-- main contents -->
 <div class="main">
 <h1>Stock Market up today</h1>
 <!-- article text here -->
 </div>

 <!-- right panel -->
 <div class="left-nav">
 <h2>Related links</h2>
 <!-- content here -->
 </div>
 </body>

扩展阅读(E文哦):

发表评论

电子邮件地址不会被公开。 必填项已用*标注