1.2　语义化HTML：有含义的标记

1.2　语义化HTML：有含义的标记

HTML是一套精巧的系统，可以包含关于文档中内容的信息。这些信息称做标记，用以描述内容的含义（meaning），即语义（semantics）。基本HTML页面中已经出现了一些例子，如标记段落内容的p元素。

HTML并不定义内容在浏览器应当如何显示，那是CSS（Cascading Style Sheet，层叠样式表）的事。HTML5比以往任何一个版本都更加强调这种区别，这是这门语言的核心。

既然如上所述，你或许想知道为什么基本HTML页面（如图1.2.1所示）中的一些文字比另一些文字要大一些，一些文字是粗体或斜体（如图1.2.2所示）。

...
<body>
     <article>
        <h1>The Ephemeral Blue Flax</h1>
        <img src="blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
        <p>I am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.org/wiki/Linum_lewisii" rel="external" title="Learn more about Blue Flax"> Blue Flax</a> that somehow took hold in my garden. They ar awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p>
        <p><small>&copy; Blue Flax Society.</small></p>
     </article>
</body>
</html>

图1.2.1　基本页面的内容，结尾的地方又加了一段。HTML元素并不描述内容如何显示，只说明内容的含义。内容的默认显示样式是由每个浏览器的内置样式表决定的，如图1.2.2所示

1.2　语义化HTML：有含义的标记 - 图1

这是个好问题。其实，原因就是每个Web浏览器都有一个内置CSS文件（一张样式表），它决定了每个HTML元素的默认样式（你自己创建的CSS可以覆盖这些样式）。对于不同的浏览器，默认样式会稍有差异，但总体上是相当一致的。重要的是，HTML所定义的内容的底层结构和含义是一致的。

块级元素、行内元素以及HTML5

容易看出，有些HTML元素（如article、h1和p）各自显示为单独的一行，就像书里的各个段落一样，而另外一些元素（如a和em）则与其他内容显示在同一行里，如图1.2.2所示。这也是浏览器的默认样式，而不是HTML元素自身的样式。这里需要多解释一下。在HTML5之前，大多数元素都可以划入块级（block-level，显示为单独的一行）或行内（inline，可以与其他内容在一行并排显示）两种类别。HTML5废弃了这些术语，因为这些术语把元素与表现关联起来了，而HTML并不负责表现。

通常，以前归为行内元素的在HTML5中称作短语内容（phasingcontent），即主要显示在一个段落之内的元素及其包含的文本。（第4章专门讲解短语内容，完整列表参见http://dev.w3.org/html5/spec-author-view/content-models.html#phrasing-content-0。）

旧的块级元素也被归入了新的HTML5类别当中，这时强调的是它们的语义功能。这些元素大多用来标明内容的主要结构块和标题（关于给内容分块和标明标题级别的元素，参见第3章）。

尽管如此，浏览器不需要也不应该为这些元素改变默认显示规则。毕竟，你不想看到两个段落（p元素）连到一起，或者强调的字句（em元素）将句子打断，单独成行。

因此，通常标题、段落和结构化元素（如article）显示在单独的行内，而短语内容则与外围内容显示在同一行。尽管HTML5不再使用块级、行内这些术语，但这样划分有助于理解它们的含义。由于在HTML5之前就成为HTML的常用词，因而这些术语常见于初级教程当中。本书也会偶尔使用这些术语，以说明元素在默认情况下是占据单独的行还是与其他内容共处一行。

后续章节将详细讲解CSS，不过现在只需要知道，样式表与HTML一样是纯文本，因此你可以用编辑HTML的文本编辑器创建你自己的样式表。

HTML5强调语义

HTML5强调HTML的语义，把所有视觉样式都扔给了CSS。但在HTML的早期版本中，并不总是这样。

万维网刚刚诞生那会儿，还没有为网页添加样式的恰当方法。在CSS1于1996年12月正式推出之前，HTML就已经存在数年了。为了填补当时那段空白，HTML包含了大量的呈现元素，这些元素用于给文本添加基本的样式，如加粗、斜体、改变字号等。

这些元素在当时发挥了作用，但随着Web开发最佳实践的发展，它们也理所当然地“失宠”了。这其中的核心观念就是，HTML只负责描述内容的含义，而非表现。

HTML的表现元素打破了这条最佳实践法则。因此，HTML4不赞成使用它们，而推荐创建者使用CSS对文本和其他页面元素添加样式。

HTML5则更进一步，它取消了一些表现元素，并重新定义了其他一些元素，使之仅具有语义功能，而非控制表现。

small元素就是这样一个例子。起初，它用于让文字变得比常规文字小一些。然而，在HTML5中，small代表条文细则，如通常用小字写的法律声明、免责条款等。当然，只要你愿意，可以使用CSS让它成为页面中最大的字，但这样做不会改变small内容的含义。

同时，HTML5不存在与small相对的big元素。还有其他的一些例子，你会在本书接下来的章节了解到。

HTML5也定义了新的元素，如header、footer、nav、article、section等。它们可以丰富内容的语义，后续章节会详述。

不过，无论是使用从HTML这门语言诞生起就存在的元素，还是使用HTML5的新元素，目标都应该是一样的：选择最能表明内容含义的元素，不必关心它们的表现。

基本HTML页面的语义

熟悉了HTML的角色以后，下面就进一步看看对示例内容进行标记的过程。正如你所看到的，编写语义化HTML并不神奇。当你熟悉了可供使用的元素以后，这基本上就是常识了。下面重温一下基本页面的body部分，看看最常用的HTML元素，如图1.2.3所示。

<body>
     <article>
       <h1>The Ephemeral Blue Flax</h1>
       <img src="blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
       <p>I am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.org/wiki/Linum_lewisii" rel="external" title="Learn more about Blue Flax"> Blue Flax</a> that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p>
     </article>
</body>

图1.2.3　基本页面的body，它包含article、h1、img、p、em和a元素以描述内容的含义。所有的内容都嵌套在article中

所有的内容都包含在一个article元素里。简言之，article定义了一段独立的内容。要包围基本页面内容，article是个不错的选择，但不是每个页面都需要这样做。关于什么时候该用article，参见第3章。

接下来是标题，参见图1.2.4。HTML提供了六个标题级别——h1～h6。其中，h1是最重要的一级。h2是h1的次一级标题，h3是h2的次一级标题，依次类推，就像用文字处理软件编辑一篇具有多级标题的文档一样。

<h1>The Ephemeral Blue Flax</h1>

图1.2.4　标题是描述页面概貌的重要元素。它们使页面对屏幕阅读器用户来说更具可访问性，而搜索引擎用它们确定页面的重点

每个HTML页面都应该有一个h1（或者多个h1，这取决于你的内容）。因此，将标题标记为h1是比较直观的做法。关于h1～h6标题元素，参见第3章。

接下来，我们插入一张图片，参见图1.2.5。img元素是显示图片的首选元素，因此也无需讨论用哪个元素合适。如果图片没有加载成功，或者页面是通过仅显示文本的浏览器查看的，就会显示alt属性中的文字。关于img元素，参见第5章。

<img src="blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />

图1.2.5　用img在页面中插入图片很容易。如果图片未能显示，就会显示alt属性中的文字“Blue Flax(Linum lewisii)”

段落由p元素标记，如图1.2.6所示。同印刷材料中的段落一样，一个段落可以包含一个或多个句子。如果页面需要再加一个段落，只需要在第一个p元素之后再加一个p元素就可以了。

<p>I am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.org/wiki/Linum_lewisii" rel="external" title="Learn more about Blue Flax">Blue Flax</a> that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p>

图1.2.6　p元素可以包含定义段落内短语语义的其他元素，em和a是两个例子

在我们的段落里，有两个元素是用来定义少量文字的含义——em和a。这是HTML5提供的大量用于提升段落文本语义的短语内容元素的两个例子。它们与p会在第4章中讨论。

em元素表示“强调”。在我们的示例页面中，它强调了对花的惊叹之情。记住，HTML描述的是内容的含义，因此em代表的是语义上的强调，而非视觉上的（尽管通常会把em文本用斜体表示）。

最后，基本页面通过a元素定义了一个链接。链接可谓是所有HTML元素中最强大的元素，因为有它才得以形成万维网。万维网的定义就是，将一个页面与另一个页面或资源连接起来，或者将页面的一部分与另一部分连接起来（既可以是同一页面的两部分，又可以是不同页面的两部分）。在这个例子中，文字“Blue Flax”是一个指向维基百科某页面的链接，如图1.2.7所示。

<a href="http://en.wikipedia.org/wiki/Linum_lewisii" rel="external" title="Learn more about Blue Flax">Blue Flax</a>

图1.2.7　a元素定义了一个指向维基百科中关于Blue Flax的链接。rel属性指出链接指向的是另一个网站，这也增加了语义。该属性是可选的，没有它链接也会正常工作。可选的title属性提供了有关所指页面的信息，它也增强了a元素的语义。当用户用鼠标滑过该链接，就会显示title属性里的内容

相当简单，对吧？当你对HTML元素了解更多之后，为内容选择正确的元素通常是相当简单的工作。偶尔，你会遇到一些内容，有一种以上的合理标记方式，这也没问题。有时候不能直接辨别对与错，当然大多数时候可以。

最后需要指出，HTML5并未试着为每一种能想到的内容类型提供对应的元素，因为这样会使这门语言变得笨重。相反，HTML5采取了一种务实的态度，其所定义的元素覆盖了绝大多数情况。

HTML之美，部分在于人们能很容易地掌握其基础，从而构建一些页面，并在此基础上不断取得进步。因此，尽管有大约100种HTML元素，但不要被这个数字吓到。只有少量核心元素是你会经常用到的，而其余的则较少用到。你已经了解了一些常见元素，因此你已经有了个好的开始。

为什么语义很重要

知道了语义化HTML的重要性，也看到了如何进行语义化以后，还需要知道它为什么如此重要。

下面是一些重要原因（当然还不全），其中的一些前面已经提到过了。

可以提升可访问性和互操作性（内容对于面向残障访问者的辅助技术是可用的，同时对于台式机、手机、平板电脑及其他设备上的浏览器都是可用的）。
改进了搜索引擎优化（SEO）。
（通常）使代码更少，页面更快。
使维护代码和添加样式变得容易。

你可能对可访问性并不熟悉。它指的是让内容对所有用户可用，不论其能力如何（参见www.w3.org/standards/webdesign/accessibility）。万维网的发明者TimBerners-Lee曾说过一句著名的话：“万维网的力量在于其普适性。让包括残障人士在内的每个人都能访问万维网，是极为重要的一点。”

任何带有浏览器的设备都可以显示HTML，因为它只是文本。然而，用户获取内容的方式可能并不相同。例如，视力正常的人可以直接查看内容，而视力受损的用户则需要放大页面，调大字号，或者使用屏幕阅读器（可以将内容朗读出来的软件，是辅助技术的一个例子）。有时，屏幕阅读器会将内容周围的HTML元素的类型读出来，让用户了解上下文。例如，对于列表，在列表各个条目读出来之前，用户会首先被告知这里有一个列表。类似地，对于链接，用户会被告知这里有一个链接，方便其决定是否点击这个链接。

屏幕阅读器用户能够以多种方式浏览网页，例如通过键盘按键从一个标题跳到下一个标题。这样，他们可以先了解一个页面的关键主题有哪些，再去听他们感兴趣的内容，而不是必须把整个页面从头到尾听下来。

你看，对残障人士来说，好的语义产生了多么大的差别。

同时，SEO的效果也会改善，也就是说网页在搜索引擎中的排名会靠前，因为搜索引擎对用特殊方式标记的内容会赋予更高的权重。例如，标题告诉搜索引擎爬虫页面的主要主题，帮助浏览器索引页面目录。

随着不断深入阅读本书，你会了解为什么好的语义能使代码更有效、更易于维护和添加样式。

1.2 语义化HTML：有含义的标记