2.3　构建HTML5新结构

HTML5新增多个结构化元素，以方便用户创建更友好的页面主体框架，下面来详细学习。

2.3.1　定义文章块

视频讲解

article表示文章，用来标识页面中一块完整的、独立的、可以被转发的内容。例如，报纸文章、论坛帖子、用户评论、博客条目等。

【示例1】article内容块通常包含标题，放在header元素里面，有时还包含footer，定义附加信息。下面示例演示了如何使用article设计一篇新闻稿。

上面示例是一篇互联网新闻的文章，在header元素中嵌入了文章的标题部分，在这部分中，文章的标题被镶嵌在h1元素中，文章的发表日期镶嵌在time元素中。在标题下部的p元素中嵌入了一大段文章的正文，在结尾处的footer元素中作为脚注，嵌入了文章的来源。整个文章块的内容相对比较独立、完整，因此对这部分内容使用了article元素。

【示例2】article元素可以嵌套使用，原则上内层的内容要与外层的内容相关联。例如，在一篇互联网新闻中，针对该新闻的相关评论就可以使用嵌套article元素设计，用来呈现评论的article元素被包含在外层article元素里面。

上面示例的内容比示例1的内容更加丰富，它添加了评论内容。具体来说，section把正文与评论部分进行了区分，在section元素中嵌入了评论的内容，评论中每个人的评论相对来说又是比较独立、完整的，因此每条评论都使用一个article，在评论中又可以分为标题和评论内容两个部分，分别放在header元素与p元素中。

2.3.2　定义区块

视频讲解

section表示区块，用于标识文档中的节，在页面上多对内容进行分区。例如，章节、页眉、页脚或文档中的其他部分。

【辨析】

div元素也可以用来对页面进行分区，但section元素并非一个普通的容器。当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div，而非section元素。

div元素关注结构的独立性，而section元素关注内容的独立性，section元素包含的内容可以单独存储到数据库中，或输出到Word文档中。

【示例1】一个section区块通常由标题和内容组成。下面示例使用section元素包裹排行版的内容，作为一个独立的内容块进行定义。

section元素包含cite属性，用来定义section的URL。如果section摘自Web，可以设置该属性。

【辨析】

article和section都是HTML5新增的元素，它们都是用来区分不同内容，用法也相似，从语义角度分析两者区分很大。

　article代表文档、页面或者应用程序中独立、完整的，可以被外部引用的内容。因为article是一段独立的内容，所以article通常包含header和footer结构。

　section用于对网站或者应用程序中页面上的内容进行分块。一个section通常由内容和标题组成。因此，需要包含一个标题，一般不用包含header或者footer结构。

通常使用section元素为那些有标题的内容进行分段，类似文章分段操作。相邻的section内容应当是相关的，而不像article之间各自独立。

【示例2】下面示例混用article和section元素，从语义上比较两者不同。article内容强调独立性、完整性，section内容强调相关性。

【追问】

既然article、section是用来划分区域的，又是HTML5的新元素，那么是否可以用article、section取代div来布局网页呢？

答案是否定的，div的用处就是用来布局网页，划分大的区域，所以我们习惯性地把div当成了一个容器。而HTML5改变了这种用法，它让div的工作更纯正。div就是用来布局的，在不同的内容块中，我们按照需求添加article、section等内容块，并且显示其中的内容，这样才是合理地使用这些元素。

因此，在使用section元素时应该注意几个问题：

　不要将section元素当作设置样式的结构容器，对于此类操作应该使用div元素实现。

　如果article、aside或nav元素更符合语义使用条件，不要首选使用section元素。

　不要为没有标题的内容区块使用section元素。

【补充】

使用HTML5大纲工具（http://gsnedders.html5.org/outliner/）来检查页面中是否有没有标题的section，如果使用该工具进行检查后，发现某个section的说明中有“untitiled section”（没有标题的section）文字，这个section就有可能使用不当，但是nav元素和aside元素没有标题是合理的。

【示例3】下面示例进一步描述了article和section混用的情景。

在上面示例中，首先可以看到整个版块是一段独立的、完整的内容，因此使用article元素标识。该内容是一篇关于W3C的简介，该文章分为3段，每一段都有一个独立的标题，因此使用了两个section元素区分。

【追问】

为什么没有对第一段使用section元素呢？

其实是可以使用的，但是由于其结构比较清晰，浏览器能够识别第一段内容在一个section内，所以也可以将第一个section元素省略，但是如果第一个section元素里还要包含子section元素或子article元素，那么就必须标识section元素。

【示例4】下面是一个包含article元素的section元素示例。

这个示例比示例1复杂了一些。首先，它是一篇文章中的一段，因此没有使用article元素。但是，在这一段中有几块独立的内容，所以嵌入了几个独立的article元素。

在HTML5中，article可以是一种特殊功能的section元素，它比section元素更强调独立性。即section元素强调分段或分块，而article强调独立性。具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用article元素，但是如果想将一块内容分成几段的时候，应该使用section元素。

在HTML5中，div变成了一种容器，当应用CSS样式的时候，可以对这个容器进行一个总体的CSS样式的套用。因此，可以将页面的所有从属部分，如导航条、菜单、版权说明等，包含在一个统一的页面结构中，以便统一使用CSS样式来进行装饰。

2.3.3　定义导航条

视频讲解

nav表示导航条，用来标识页面导航的链接组。一个页面中可以拥有多个nav，作为页面整体或不同部分的导航。具体应用场景如下：

　主菜单导航。一般网站都设置有不同层级的导航条，其作用是在站内快速切换，如主菜单、置顶导航条、主导航图标等。

　侧边栏导航。现在主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到相关文章或商品页面上去。

　页内导航。就是页内锚点链接，其作用是在本页面几个主要的组成部分之间进行跳转。

　翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。

并不是所有的链接组都要被放进nav中，只需要将主要的、基本的链接组放进nav元素即可。例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等，这时使用footer元素是最恰当的。

【示例1】在HTML5中，只要是导航性质的链接，我们就可以很方便地将其放入nav元素中。该元素可以在一个文档中多次出现，作为页面或部分区域的导航。

    <nav draggable="true">
        <a href="index.html">首页</a>
        <a href="book.html">图书</a>
        <a href="bbs.html">论坛</a>
    </nav>

上述代码创建了一个可以拖动的导航区域，nav元素中包含了三个用于导航的超链接，即“首页”“图书”“论坛”。该导航可用于全局导航，也可放在某个段落，作为区域导航。

【示例2】下面示例页面由多部分组成，每部分都带有链接，但只将最主要的链接放入了nav元素中。

在这个例子中，第一个nav元素用于页面导航，将页面跳转到其他页面上去，如跳转到网站主页或博客页面；第二个nav元素放置在article元素中，表示在文章内进行导航。除此之外，nav元素也可以用于其他所有你觉得是重要的、基本的导航链接组中。

2.3.4　定义边栏

视频讲解

aside表示侧边，用来标识所处内容之外的内容。aside内容应该与所处的附近内容相关。例如，当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边广告、导航条，以及其他类似的有别于主要内容的部分。

aside元素主要有两种用法：

　作为主体内容的附属信息部分，包含在article中，aside内容可以是与当前内容有关的参考资料、名词解释等。

【示例1】下面示例设计一篇文章，文章标题放在header中，在header后面将所有关于文章的部分放在了一个article中，将文章正文放在一个p元素中。该文章包含一个名词注释的附属部分，因此在正文下面放置了一个aside元素，用来存放名词解释的内容。

这个aside被放置在一个article内部，因此引擎将这个aside内容理解为与article内容相关联的。

　作为页面或站点辅助功能部分，在article之外使用。最典型的形式是侧边栏，其中的内容可以是友情链接、最新文章列表、最新评论列表、历史存档、日历等。

【示例2】下面代码使用aside元素为个人博客添加一个友情链接辅助版块。

友情链接在博客网站中比较常见，一般放在左右两侧的边栏中，因此可以使用aside来实现，但是这个版块又具有导航作用，因此嵌套了一个nav元素，该侧边栏的标题是“友情链接”，放在了h2元素中，在标题之后使用了一个ul列表，用来存放具体的导航链接列表。

2.3.5　定义主要区域

视频讲解

main表示主要，用来标识网页中的主要内容。main内容对于文档来说应当是唯一的，它不应包含在网页中重复出现的内容，如侧栏、导航栏、版权信息、站点标志或搜索表单等。

简单来说，在一个页面中，不能出现一个以上的main元素。main元素不能被包裹在article、aside、footer、header或nav中。

【示例】下面示例使用main元素包裹页面主要区域，这样更有利于网页内容的语义分区，同时搜索引擎也能够主动抓取主要信息，避免被次要信息干扰。

2.3.6　定义标题栏

视频讲解

header表示页眉，用来标识页面标题栏。header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面，或者一个内容块的标题。

header也可以包含其他内容，如数据表格、表单或相关的LOGO信息，一般整个页面的标题应该放在页面的前面。

【示例1】在一个网页内可以多次使用header元素，下面示例显示为每个内容区块添加一个header。

在HTML5中，header内部可以包含h1～h6元素，也可以包含hgroup、table、form、nav等元素，只要应该显示在头部区域的标签，都可以包含在header元素中。

【示例2】下面示例是个人博客首页的头部区域，整个头部内容都放在header元素中。

2.3.7　定义标题组

视频讲解

hgroup表示标题分组，用来为标题或子标题进行分组。通常hgroup与h1～h6元素组合使用，一个内容块中的标题及其子标题可以通过hgroup组成一组。但是，如果文章只有一个主标题，则不需要hgroup元素。注意，W3C将hgroup的元素从HTML5.1规范中移除，不再建议使用。

【示例】下面示例显示如何使用hgroup元素把主标题、副标题和标题说明进行分组，以便让引擎更容易识别标题块。

2.3.8　定义页脚栏

视频讲解

footer表示脚注，用来标识文档或节的页脚。footer元素应当含有其包含元素的信息。例如，页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等。

【示例1】在HTML4中，一般使用<div id="footer">包裹页脚信息，现在使用footer元素来替代，更富有语义。下面示例使用footer元素为页面添加版权信息栏目。

【示例2】在一个页面中，可以使用多个footer元素。同时，可以为article或section内容添加footer。下面示例分别在article、section和body区域内添加footer信息。

    <header>
        <h1>网页标题</h1>
    </header>
    <article>
        <h2>文章标题</h2>
        <p>文章内容正文</p>
        <footer>注释</footer>
    </article>
    <section>
        <h2>段落标题</h2>
        <p>正文</p>
        <footer>段落标记</footer>
    </section>
    <footer>网页版权信息</footer>