定义标题的最好方法
星期三, 06月 4th, 2008
作者:阿宏 2005-4-15 20:45:18
原文:What is the Best Way to Mark up the Title of a Document?
说明:本文是 《Web Standards Solutions: The Markup and Style Handbook》一书中de一章.书号:ISBN:1590593812.我会陆续翻译此书中有价值de章节.
原作者:Dan Cederholm
翻译:阿宏
一个文档标题,最好de定义方法是什么？要回答这个问题,先设想我要在一个页面上定义文章de标题,通常我有三个方法来实现这个简单目de:
方法一: 有意义吗？
<span class=”heading”>文章标题</span>
虽然在某些情况下<span>会是一个方便de标签,但它并不能表达出标题de完整含义.采用这个方法de一个好处是,我可以对它附加一个CSS规则,分配其一个heading class,使其文字象标题一样显示.
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
ok,现在所有de标题都用heading class标记成了大号de粗体字体,并且为蓝色.太棒了!但是这样做对吗？如果有人用一个不支持CSSde浏览器来观看,会怎样呢？
举个例子,如果我设置de这个外部样式表de规则不被老版本de浏览器支持,会怎样？又或者有视觉障碍de人用屏幕阅读器来阅读这个页面,又会怎样？一个访问者通过这些途径所看到(或听到)de应该和这个页面上正常de文本没有任何区别.
尽管class=”heading”为这个标签增加了一点意义,但<span>仍然只是一个普通de标签,可以被大多数浏览器de缺省样式所修改掉.
搜索引擎检索这个页面时会略过<span>标签,就好象它不存在一样,不会对其可能包含de关键字给于一点额外de重视.在后面我会更多de谈到搜索引擎和标题de关系.
最后,由于<span>标签是一个内嵌元素,我可能需要把它嵌套在一个额外de块级元素中,比如<p>标签或<div>标签,为de是使它能够形成单独de行,这会进一步被非必要de相关代码弄乱您de标签.而这些额外增加de标签却是必须de,这样才能使不支持CSSde浏览器显示出没有差别de文本.
方法二:<p>和<b>组合
<p><b>文章标题</b></p>
使用一个段落标签,将会给我带来块级de显示,<b>会把文本变成粗体.但是用这个方法标记一个重要de标题时,我面对de是同样无意义de结果.
不象方法A,<b>标签能在可视化de浏览器中把文字显示成粗体——甚至在不支持CSSde浏览器中.但是和<span>标签一样,搜索引擎也不会因为有一些东西在段落中被加粗了而给予更高de优先.
难以设计样式
用普通de<p>和<b>de组合,也带来了另一个缺憾——无法把这个标题设计成不同于其他段落de样式.我可能想用一个特别de样式来突出标题,来使页面内容更清晰更具结构,但是用这个方法只能使其显示成粗体.
方法三:样式加实质
<h1>文章标题</h1>
恩,多么好de标题定义.大多数de网页设计者对它都很熟悉.其实适当de使用它们,<Hn> 就能为页面内容提供灵活de、可索引de、以及可样式化de结构.
这也是聪明de定义方法,您会发现它很简单.不再需要额外de标签,您可以说,这仅仅比另外两个方法节省了一点点de字节,可以忽略不计,但节省一点是一点.
<h1>一直到<h6>,代表了标题de六个级别,从最重要de(<h1>)到最次要de(<h6>).他们本身就是块级de,不需要增加其它元素来使其单独成行.简单,有效——就是好工具.
轻松定制样式
因为我使用<h1>标签是唯一de,而<b>或<p>标签更适合使用在整个页面,所以我可以用各种各样deCSS方法来样式化.
更重要de是,尽管完全不用样式,一个标题标签也能明显de表示出一个标题!可视化de浏览器把 <h1>显示成更大de粗体.一个非样式化de页面将以被期望de那样显示文档结构,用适当de标题标签来传达意思.
屏幕阅读器、PDA、手机、以及可视化de和非可视化de浏览器都会明白,碰到一个标题标签时该做de事情,正确de处理,比页面上de普通文本更重视de来对待.而使用<span>标签,那些不支持CSSde浏览器就不会特别de对待它.
讨厌de默认样式
以往,由于浏览器默认de缺省值非常de丑陋,设计者们也许会避免完全de使用标题标签.或者,因为缺省值de巨大尺寸而避免使用<h1>或<h2>,取而代之de是用更高数值de标题标签来实现更小de尺寸.
然而,需要重点强调de是,我可以很简单de用CSS来改变这些标题标签——举个例子,一个< ;h1>并非一定是占满大半屏幕de巨大标版.在后面,我将证明用CSS来样式化标题标签是多么de简单,希望可以帮助您减轻巨大de恐惧.
对搜索引擎友好de
这是一个巨大de好处.搜索引擎喜欢标题标签.另一方面,一个<span>标签或者普通de加粗de段落标签却在意味着次要一点.适当de用<h1>到<h6>标记您de标题,只需要您de一点点努力,然而却让搜索引擎更容易de检索到您de页面,让人们最终能找到它们.
搜索引擎机器人会给予标题标签特别de关注——这是您可能放置一些关键词de地方.就象检索到 <title>和<meta>,它们会顺着标题标签往页面下面查找.如果您不使用这些标签,那么包含在里面de关键词将不会被认为是有价值de,从而被忽略掉.
所以只要付出一点点de努力,您就能增加人们基于页面de内容找到您de站点de可能性.听上去不错,不是吗？
关于标题de次序
在例子中,这个特别de标题是页面中最重要de,因为它是文档de标题.因此,我使用最重要de标题标签,<h1>.顺应W3Cde规范,一些人认为跳过数个标题级是个不好de使用.举个例子,想象我在下面de页面:
<h1>文章标题</h1>
我接下去de标题(如果不是用另一个<h1>重复de话)应该是<h2>,然后是<h3 >,等等.您也许不应该在<h1>后面跳过一级,直接跟上<h3>.我倾向于同意以上de观点,顺着行文保持级别de连续性,来构造一个排版结构.这样de话,给一个已经存在de页面添加标题和样式就更容易了,您会减少因使用超出de数字而导致de错误.
前面提到de,设计者也许会用<h4>来标签一个页面上最重要de标题,仅仅是因为它de缺省de字体尺寸不象<h1>那样令人生厌de巨大.但是记住,先结构,后设计.我总是能用CSS来把标题样式化成任何我喜欢de文字尺寸.
