标记语言——标题(2)

方法B: P和B的组合

<p><b>Super Cool Page Title</b></p>

方法B使用了段落标签,这会让我们得到我们想要的块级元素的显示效果,而<b>标签会让文字呈现粗体的样式(在大多数浏览器上) — 但是我们以这样的方式标记重要的标题时,仍然要面对同样缺少语义性的结果.

不像方法A,<b>标签的存在就算缺少css样式的定义,在大多数浏览器中还是会将文字以粗体的样式呈现.但是和<span>标签一样,搜索引擎不会为段落内的粗体文字提升关键字权重.

难以加上样式

使用单纯的p和b的标签组合,让我们无法为这个标题加上和其它段落有所区别的样式,或许我们想以独特的方式强调标题,为页面内容加上定义和结构 — 但是使用了这个方法让它呈现粗体后,我们就没有办法去做这些事情了.

方法C:样式与实质

<h1>Super Cool Page Title</h1>

哈哈,我们的好朋友标题标签来了,标题标签从一开始就是存在的,但是许多网页设计师还是无法以一致的方式使用它们.如果使用得当,标题标签能够提供页面内容的锚点,提供灵活的,可索引的,可更改样式的结构.

从标签本身的观点来看,你一定会爱上它的简洁,它们不需要额外的容器标签,你甚至能说这个方法能比前两个方法节省了一些字节,可能可以忽略,但是每小一个字节就是改变.

<h1>到<h6>分别代表了6层标题,从最重要的<h1>到最不重要的<h6>,他们本身就是块级元素不需要一个额外的容器就能自成一行,简单而又有效率 — 是完成这项工作的最佳工具.

容易定义样式

因为<h1>标签拥有独特的意义,不像<b>或者<p>标签那样会在文内用到多次,因此我们能用css为它加上各式各样的样式(我们会在本章的"更多技巧"中深入讨论).

更重要的是,就算不加上任何的样式定义,标题标签看起来就很明显是个标题!浏览器会用大字体,粗体字呈现<h1>的内容,就算去掉页面所有的样式定义,仍然可以看到文档的结构,因为正确的标题标签描述的是内容意义,而不是表现方式. (图 2-1)

图 2 - 1: 脱离样式后使用标题标签的页面内容

屏幕阅读器,PDA,移动电话和其他一些视觉的非视觉的浏览器也能识别并正确处理标题标签的内容,把它的重要性突出于页面其他内容之上.使用<span>标签,不支持(或无法支持)css的浏览器就不会认为它有什么特别之处.

讨厌的默认样式

在网页设计史上,设计师们都会避免使用标题标签,完全是因为不加上样式的时候,标题标签看起来就和怪物没什么两样,二者择其一,其中一部分人会因为默认字体大小太大而避免使用<h1>或<h2>而去使用字体大小较小的标号较高的标题标签.

然而,有个重点值得强调,我们可以根据自己的喜好通过定义css轻易的改变这些标题标签的样式 — 举例来说,<h1>未必一定是占据了半块屏幕的庞然大物,稍后,我会示范如何简单的用css样式来定义标题标签,以此来帮助你克服对<h1>的恐惧.

对搜索引擎的友好

这是最大的优点.搜索引擎十分喜欢标题标签,<span>标签或者段落中的粗体对搜索引擎来说并没有多大意义,使用正确的<h1>~<h6>标记标题花不了多少时间,但是却能帮助搜索引擎为你的页面建立索引,让用户更容易找到你的网页.

搜索引擎的机器人非常重视标题标签中的内容,或许,你会想要在里面堆上几个关键字,在他们处理完<title>和<meta>标签之后,紧接着就会处理页面内容中的标题标签,如果你的页面上没有使用标题标签的话,那这些在你的标题中的关键字不会引起他们的重视,被他们忽略.

所以,只需要花少少的时间,就能让其他人更容易通过内容找到你的网页,听起来不错,对吧?

附带一提的标签顺序

在上面的示例中,在页面中最重要的就是标题,因为他是整个文档的标题,因此,我们将使用最重要的标题标签<h1>,根据W3C,有些人认为跳过标题层并不是什么好习惯,举例说明,假设我们有下面这么一份网页:

<h1>Super Cool Page Title</h1>

那么下一个标题(如果不是另一个<h1>的话),就应该是<h2>,在接下去则使用<h3>等等,你也许不会跳过某级标题,比如说在<h1>之后直接使用<h3>.我比较赞同,并且认为结构和纲要相同,应该按照顺序使用每个级层,这能让你为已经存在的页面方便的添加标题,样式.同时这样也比较不会出现用完所有标题级层的情况.

如同先前所述,设计者可能会使用<h4>代表页面里最重要的标题,只因为它的预设字体大小不如<h1>那样大的恐怖.但是要记住,先写结构,再调整样式,我们可以在任何时候根据我们自己的喜好通过css改变标题标签的字体大小.