标准化设计解决方案 - 标记语言和样式手册
Web Standards Solutions The Markup and Style Handbook

Part 1: Get Down With Markup  从标记语法谈起

Chapter 2 标题

总览:

不但所有网页都需要有标题,而且如果标记正确的话,他们能为网页设计和易用性增色不少.

从外观来说,网页的标题通常是使用较大的字号,或许会用和主体文字不同的颜色或者字体.标题的作用是"简要的描述往后章节所讨论的主题",W3C这样描述 — 显示网页内各个段落的概要.

怎样来创建一个页面标题来使得我们要展现的信息得到最有效的利用?在这个章节中,我们将研究几种常用的处理标题的方法,试着从中找出其中一种对我们最有帮助的方式,然后,我们将使用一些css的技巧和窍门来为最棒的方法装饰一番.

创建文档标题的最好方法是什么?

在回答这个问题之前,让我们假设现在正要把标题放置在文档的页首,我们来看看能够达成类似效果的三种方式.

方法A:有意义吗?

<span class="heading">Super Cool Page Title</span>

虽然<span>标签在某些场合会是个方便的标签,但是对于页面标题来说,它的意义并不大,使用这个方法的唯一好处是我们可以为 heading 类指定一个css样式,以便让文字看起来像是个标题.

.heading {
  font-size: 24px;
  font-weight: bold;
  color: blue;
  }

现在,所有标记了heading类的标题都会变大,变粗,变蓝,很棒对吧?但是,如果有人使用一个不支持css的浏览器访问这个页面会怎么样呢?

举例来说,如果我们把css样式放在旧浏览器不支持的外部样式表文件里 — 或者屏幕阅读器为有障碍的用户朗读页面时会怎么样呢?通过这些途径访问这个页面的使用者将看不到(听不到)标题和正文文字的差异.

class="heading"这样的标注方法稍~~微的描述了标签内容的意义,但是<span>只是个一般用途的容器,只是让大部分浏览器改变默认显示样式而已.

搜索引擎在抓取到这个页面时,会跳过<span>标签就像它不曾在那边一样,不会为里面可能包含的关键字提升权重,稍后在本章节内会提到更多搜索引擎和页面标题的关系.

最后,由于<span>标签是一个行内元素,我们大多需要把方法A的内容在放置到另一个块级容器中,比方说<p>或者<div>,以便让它独占一行.这样会生成许多不必要的代码,就算你加上需要的容器,不支持css的浏览器仍然会以他本来的方式显示文字,让用户看不出标题和正文的任何区别.