《HTML5与CSS3实战指南》——2.4 定义页面结构

本节书摘来自异步社区《HTML5与CSS3实战指南》一书中的第2章，第2.4节,作者： 【美】Estelle Weyl , Louis Lazaris , Alexis Goldstein 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.4 定义页面结构

现在我们已经了解了模板的基础知识，下面将开始介绍详细信息，为网页指定一些基本结构。

在本书后面的章节中，我们将深入介绍添加CSS3功能和其他HTML5的精华。现在，我们将考虑在网站总体布局方面应使用哪些元素。我们将在本节以及后面的章节介绍语义。当使用这个术语时，我们指的是用指定的HTML元素名称来描述其内容的方式。由于HTML5包含一系列广泛的语义元素，因此您会发现，与过去使用HTML4或XHTML的时候相比，多花了一些时间思考内容结构及含义。非常好！理解了内容的意思才能够写出好的标记。

如果您回头看一下The HTML5 Herald的截图（或登录在线网站），您会看到它被划分为以下几部分。

• 具有徽标和标题的标头部分。
• 导航栏。
• 主体内容分为3列。
• 列中的文章和广告块。
• 页脚包含一些作者和版权的信息。

在决定页面的不同部分采用哪些适当的元素之前，让我们考虑一些可选项。首先，我们将向您介绍一些新的HTML5的语义元素，这些元素可以帮助我们划分页面并为我们的文档结构增添更多的意义。

2.4.1 header元素
很明显，我们要看的第一个元素是元素。WHATWG规范将它简单地描述为“一组前言或导航助手。”1从本质上讲，这意味着，无论您习惯了在<divid="header">中包含什么内容，现在您都需要将这些内容放在元素header中。

但是，这里有一个问题，header元素与经常习惯用于网站标题部分的div元素有所不同：这里没有每页只用一次的限制。相反，您可以使用新的header元素介绍每节内容。我们在这里使用section，实际上并不是下面将要介绍的section元素；从技术上讲，它是HTML5中的“分节内容”。在下一章中，我将详细地介绍这一内容。现在，您可以放心地将它理解为任意一段需要有自己标头的内容。

header元素可用于页面内任何特定独立部分的前言或导航助手，或应用于整个页面—或两者兼而有之。

虽然header元素经常会被放在页面或一节内容的顶部，但是它的定义与其位置无关。网站的布局可能要求将文章或博客的标题位于内容的左侧、右侧或下面。无论怎样，您仍可使用header元素来描述该内容。

2.4.2 section元素
下一个元素是您所熟悉的HTML5的section元素。WHATWG规范将其定义为：2

section元素表示文档或应用程序的通用部分。在此上下文中，一节就是一组专题内容，并通常带有标题。

它进一步解释为，section元素不应仅用于以样式或脚本为目的的通用容器。如果您不能将section元素当作通用容器（例如，为了实现您想要的CSS布局），那么您该使用什么呢？我们的老朋友，div元素，在语义上毫无意义。

让我们回到规范中的定义，section元素的内容应是“主题的”，因此，以通用的方式使用它以包含不相关的内容是不正确的。

以下是一些恰当使用section元素的示例。

选项卡界面的各个部分。
“关于”页面的部分，例如，一个公司的“关于”页面，可能包括公司的历史、使命及其团队等部分。
很长的“服务条款”页面的不同部分。
在线新闻网站的各个部分。例如，文章可以分为体育、世界事务以及经济咨询等栏目。

语义

一次向网络设计人员提供新的语义标记时，总会就如何正确使用这些元素进行讨论，比如规范的意图到底是什么等问题。您可能还记得关于在前一个HTML版本中如何正确使用dl元素的讨论。HTML5也无法避免，尤其是涉及section元素时。

使Bruce Lawson，备受尊重的HTML5的权威，也承认曾在过去使用section元素不当。为了明确这一点，Lawson发表3了他对这些错误的解释，这是非常值得一看的。简单地讲：

• ection元素是通用的，所以如果有一个更具体的语义元素更恰当（比如article、aside或nav），那么就使用这些替代section元素。
• ection元素有语义含义，意味着它所包含的内容具有相关性。如果您无法简洁地用几个词描述放在section元素中的内容，那么极有可能需要一个中立的容器替代它：更低级的div。

就是说，一般情况下，总是有语义的，所以在某些情况下，此解释是开放的。如果您可以提出充分的理由使用指定元素而不使用另一个，就替换它。万一有人要求您使用另一个，那么所引起的争论，对于所有参与的人来说，既具有娱乐性又内容丰富，甚至可能会得到关于规范的更广泛的社会共识。
请记住，如果使用得当，您也可以在现有的section元素中嵌套section元素。例如，对于在线新闻网站，世界新闻栏目可以按照全球各主要地区进行细分。

2.4.3 article元素
article元素与section元素类似，但也有一些明显的不同之处。以下是根据WHATWG4给出的定义：

rticle元素表示在文档、页面、应用程序或网站中自我包含的部分，从原则上讲，是独立分布和重复使用的。例如，在企业联合组织中。

这一定义的关键术语是自我包含的部分和独立分配。section元素可以包含任何主题的内容，article元素必须是独立的一部分内容。这确实很难区分—所以在有疑问的时候，尝试一下这种联合测试：如果某一段内容可以无需修改重新发布在其他网站上，或通过RSS更新发布，或在社会媒体网站（比如Twitter或Facebook）上推出，就说明它已经含有article元素。

最终，它是由您来决定如何构成article元素中的内容，这里有一些建议，仅供参考。

• 论坛帖子。
• 杂志或报纸文章。
• 博客条目。
• 用户提交的评论。

最终，就像section元素，article元素可以被嵌套在其他article元素中。您也可以将section元素嵌套在article元素中，反之亦然。

2.4.4 nav元素
可以安全地假设这个元素几乎会出现在每个项目中。nav元素表示的就是它本身的含义：一组导航链接。尽管nav元素最普通的用途是包含一个无序链接表，但这里还有其他选择。例如，有一段文字包含有页面或页面某部分的主要导航链接，您也可以再为这一段文字添加nav元素。

在这两种情况下，nav元素应为最重要的导航预留。所以，建议您避免在页脚的简短链接表中使用nav元素。

nav元素及其辅助功能

您可能已经见过在许多网站上实行的设计模式“跳过导航”链接。这个想法可以使已经知道网站主要导航的屏幕阅读器用户跳过此处—毕竟，每一次都要听从大型网站的整个导航菜单，然后再单击它进入页面，这样做没有任何意义！

nav元素有可能消除这种需要。如果一个屏幕阅读器看到nav元素，那么它可能允许用户跳过导航而无需任何其他的链接。该规范规定：

用户代理（比如屏幕阅读器）的目标用户是：在最初呈现导航信息时已经被省略的用户；或者是可以立即使用导航信息的用户，他们可以使用该元素，作为一种决定页面哪些内容在最开始时被跳过或根据要求提供的一种方式。

当前屏幕阅读器无法识别导航时，这并不意味着您不应该使用它。辅助技术将继续得到发展，很可能您的网页将在以后的网络上呈现。现在通过建立标准，可以确保屏幕阅读器不断改进，您的网页会随着时间的推移变得更容易访问。

什么是用户代理？

在浏览规范时，您将会多次碰到术语“用户代理”。它仅是关于浏览器的一个非常具有想象力的术语—软件“代理”，就是用户用于进入页面内容的工具。规范不将它简单地称为“浏览器”是因为用户代理可以包括屏幕阅读器或其他阅读网页的技术方式。
您可以在指定页面使用多次nav元素。如果在您的网站上有一个主导航栏，那么在此处就需要一个nav元素。

另外，如果您有一组二级链接指向当前页面的不同部分（使用页锚点），那么这个工具也应包含在nav元素中。

与section元素一样，对它的使用仍有一些争论：由哪些构成nav元素的可接受用途，并且为什么在某些情况下不推荐使用（如在页脚内）。一些开发人员认为这种元素是适当的分页或主题链接路径下面的标题链接或搜索形式，这些构成了一个网站导航（就像在Google中）的主要手段。

这一决定最终将取决于您。WHATWG的HTML5规范的首席编辑、程序开发人员Ian Hickson直接回答了这个问题：“使用它就像使用class=nav一样”。5

2.4.5 aside元素
此元素表示页面的某一部分与其他内容无关，将这部分内容放在aside元素中，可认为它独立于其他内容6。

aside元素可用于包含与其他内容不相关的部分。

• 特定独立的一部分内容（例如，文章或节）。
• 作为惯用做法，将整个页面或文档作为“侧栏”，添加到网页或网站中。

aside元素不应被用于包含页面中的主要内容部分。换句话说，它并不是附加说明。aside元素可以自成一体，但仍是整体的一部分。

aside元素的一些可行性用途包括侧边栏、二级链接表或广告区。应该注意的是，aside`元素（如在页眉的情况下）不是由它在页面的位置所决定的，它有可能在边上，也有可能在其他地方；它的内容本身及其与其他元素的关系，决定了它的位置。

2.4.6 footer元素
我们将在本章讨论的最后一个元素是footer元素。与header元素一样，您可以在一个单独页面使用多个footer元素。您应使用footer元素包含页面的某一部分，也就是您通常在<div id="footer">中所包含的内容。

根据规范，footer元素表示最近部分内容的页脚。“部分”内容可以是section、article或aside元素。

通常，页脚包含版权信息、相关链接列表、作者信息和您通常在一个内容块结尾处所添加的类似内容。然而，与aside和header元素一样，footer元素没有根据其在页面上的位置对其进行定义。因此，它不必出现在某一部分的结尾处或页面的底部。当然最有可能会出现在这些地方，但这不是硬性规定。例如，关于博客的作者信息可以在发布的文章的上方，而不是在下方，但这仍然被认为是页脚信息。

HTML5创建者如何决定包含哪些新元素？

您可能想知道HTML5创建者如何想出了这些新语义元素。毕竟，您可以使用几十个切实的语义元素—但为什么没有用于用户提交评论的comment元素或专门用于广告的ad元素呢？

HTML5的创作者通过运行测试，搜索数以百万的网页，看看最常使用哪些元素。根据检测元素的id和class属性来筛选这些元素。这一结果引导并帮助了解新的HTML语义元素的创建。

因此，不会引进可能被拒绝或不被使用的新技术，HTML5的编辑努力推出与网页作者和谐工作的元素。换句话说，对于常见的网页包含id为header的div元素很常见，这样包含一个header元素是非常有意义的。