第3章 HTML 5的结构
在HTML 5对HTML 4所做的各方面修改中，一个比较重大的修改就是为了使文档结构更加清晰明确，容易阅读，增加了很多新的结构元素。本章详细介绍这些新增的结构元素，涉及它们的定义、使用方法以及使用示例，最后再介绍一下在HTML 5中，究竟怎样将这些新增的结构元素结合使用。
学习内容：
❑掌握HTML 5中新增的主体结构元素的定义以及使用方法、使用场合。新增的主体结构元素包括article元素、section元素、nav元素以及aside元素。
❑掌握HTML 5中新增的非主体结构元素的定义以及使用方法、使用场合。新增的非主体结构元素包括header元素、hgroup元素、footer元素以及address元素。
❑掌握在HTML 5中应该怎样结合运用这些新增结构元素来合理编排页面总体布局，掌握什么是显式编排，什么是隐式编排，HTML 5分析器是按什么原则来分析页面结构的，以及怎样对这些新增元素使用CSS样式。
3.1 新增的主体结构元素
在HTML 5中，为了使文档的结构更加清晰明确，追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。需要说明的是，本章所讲的内容区块是指将HTML页面按逻辑进行分割后的单位。例如，对书籍来说，章、节都可以称为内容区块；对博客网站来说，导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。
接下来将详细讲解HTML 5在页面的主体结构方面新增加的结构元素。
3.1.1 article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报章杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件，或者其他任何独立的内容。
除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。
现在，以博客为例来看一段关于article元素的代码示例，如代码清单3-1所示。
代码清单3-1 article元素示例
＜article＞
＜header＞
＜h1＞苹果＜/h1＞
＜p＞发表日期: ＜time pubdate="pubdate"＞2010/10/09＜/time＞＜/p＞
＜/header＞
＜p＞＜b＞苹果＜/b＞ ,植物类水果,多次花果...("苹果"文章正文)＜/p＞
＜footer＞
＜p＞＜small＞著作权归＊＊＊公司所有。＜/small＞＜/p＞
＜/footer＞
＜/article＞
这个示例展示的是一篇讲述苹果的博客文章，在header元素中嵌入文章的标题部分，在这部分中，文章的标题“苹果”被镶嵌在h1元素中，文章的发表日期镶嵌在p元素中。在标题下部的p元素中，嵌入一大段该博客文章的正文，在结尾处的footer元素中，嵌入文章的著作权作为脚注。整个示例的内容相对比较独立、完整，因此，对这部分内容使用article元素。
article元素是可以嵌套使用的，内层的内容在原则上需要与外层内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。
接下来看一个关于article元素嵌套的代码示例，如代码清单3-2所示。
代码清单3-2 article元素嵌套示例
＜article＞
＜header＞
＜h1＞苹果＜/h1＞
＜p＞发表日期:
＜time pubdate datetime="2010/10/09"＞2010/10/09＜/time＞
＜/p＞
＜/header＞
＜p＞＜b＞苹果＜/b＞ ,植物类水果,多次花果...("苹果"文章正文)＜/p＞
＜section＞
＜h2＞评论＜/h2＞
＜article＞
＜header＞
＜h3＞发表者：陆凌牛＜/h3＞
＜p＞
＜time pubdate datetime="2010-10-10T19:10-08:00"＞
1小时前
＜/time＞
＜/p＞
＜/header＞
＜p＞我喜欢苹果,我最喜爱的品种是红富士。＜/p＞
＜/article＞
＜article＞
＜header＞
＜h3＞发表者：张玉＜/h3＞
＜p＞
＜time pubdate datetime="2010-10-10T19:15-08:00"＞
1小时前
＜/time＞
＜/p＞
＜/header＞
＜p＞苹果？我不喜欢,我喜欢吃橘子。＜/p＞
＜/article＞
＜/section＞
＜/article＞
这个示例中的内容比代码清单3-1中的内容更加完整，它添加了文章读者的评论内容，整体内容还是比较独立、完整的，因此对其使用article元素。具体来说，该部分内容又分为几部分，把文章标题放在header元素中，把文章正文放在header元素后面的p元素中，然后用section元素把正文与评论部分进行区分。后面马上会介绍section元素，它是一个分块元素，用来对页面中的内容进行分块，在section元素中嵌入评论的内容，评论中有几个人的评论，每个人的评论部分相对来说又是比较独立、完整的，因此对它们都使用一个article元素，在评论的article元素中，又可以分为标题与评论内容部分，分别放在header元素与p元素中。
关于示例中提到的time元素与pubdate属性，可查看本节结尾处关于time元素与pubdate属性的说明。
另外，article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。以下为它的一个示例，如代码清单3-3所示。
代码清单3-3 用article元素表示插件
＜article＞
＜h1＞My Fruit Spinner＜/h1＞
＜object＞
＜param name="allowFullScreen" value="true"＞
＜embed src="#" width="600" height="395"＞＜/embed＞
＜/object＞
＜/article＞
3.1.2 section元素
section元素用来对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要直接定义样式或通过脚本定义行为时，推荐使用div元素而非section。
我们可以这样理解：section元素中的内容可以单独存储到数据库中或输出到word文档中。以下为它的一个示例（注意，标题部分位于它的内部，而不是它的前面），如代码清单3-4所示。
代码清单3-4 section元素示例
＜section＞
＜h1＞苹果＜/h1＞
＜p＞＜b＞苹果＜/b＞ ,植物类水果,多次花果...("苹果"文章正文)＜/p＞
＜/section＞
通常不推荐为那些没有标题的内容使用section，可以使用HTML 5轮廓工具来检查页面中是否有不包含标题部分的section，HTML 5轮廓工具的网址为“http：//gsnedders.html5. org/outliner/”，如果使用该工具进行检查后，会看见对于某个section的说明中有“untitiled section”（没有标题的section）文字，这个section就有可能使用不当（但是nav元素或aside元素没有标题是合理的）。
section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，不要将它与表示“有着自己的完整的、独立的内容”的article元素混淆。
下面来看两个article元素与section元素结合使用的示例，希望能够帮助你更好地理解article元素与section元素的区别。
首先来看一个带有section元素的article元素的示例，如代码清单3-5所示。
代码清单3-5 带有section元素的article元素示例
＜article＞
＜h1＞苹果＜/h1＞
＜p＞＜b＞苹果＜/b＞ ,植物类水果,多次花果...＜/p＞
＜section＞
＜h2＞红富士＜/h2＞
＜p＞红富士是从普通富士的芽(枝)变中选育出的着色系富的统称...＜/p＞
＜/section＞
＜section＞
＜h2＞国光＜/h2＞
＜p＞国光苹果品,又名小国光、万寿。原产美国,1600年发现的偶然实生苗...＜/p＞
＜/section＞
＜/article＞
代码清单3-5中的内容首先是一段独立的、完整的内容，因此使用article元素。该内容是一篇关于苹果的文章，该文章分为3段，每一段都有一个独立的标题，因此使用了两个section元素。记住，对文章分段的工作也是使用section元素完成的。这里有人会问，为什么没有对第一段使用section元素，其实是可以使用section元素的，但是由于这里的结构比较清晰，分析器是可以识别第一段内容在一个section元素里的，所以也可以将第一个section元素略去不写，但是如果第一个section元素里还要包含子section元素或子article元素，那么必须写明第一个section元素。
接下来看一个包含article元素的section元素的示例，如代码清单3-6所示。
代码清单3-6 包含article元素的section元素示例
＜section＞
＜h1＞水果＜/h1＞
＜article＞
＜h2＞苹果＜/h2＞
＜p＞苹果,植物类水果,多次花果...＜/p＞
＜/article＞
＜article＞
＜h2＞橘子＜/h2＞
＜p＞橘子,是芸香科柑橘属的一种水果...＜/p＞
＜/article＞
＜article＞
＜h2＞香蕉＜/h2＞
＜p＞香蕉,属于芭蕉科芭蕉属植物,又指其果实,热带地区广泛栽培食用...＜/p＞
＜/article＞
＜/section＞
这个示例比前面的示例复杂了一些，首先，它是一篇文章中的一段，因此没有使用article元素。但是，在这一段中，可以分为几块独立的内容，因此嵌入了几个独立的article元素。
看到这里，你可能又糊涂了，这两个元素可以互换使用吗？它们的区别到底是什么呢？事实上，在HTML 5中，article元素可以看成是一种特殊种类的section元素，它比section元素更强调独立性。section元素强调分段或分块，而article强调独立性，具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用article元素，但是如果想将一块内容分成几段的时候，应该使用section元素进行分段。另外，在HTML 5中，div元素变成了一种容器，当使用CSS样式的时候，可以对这个容器进行一个总体的CSS样式的套用。
另外再补充一点，在HTML 5中，可以将所有页面的从属部分，譬如导航条、菜单、版权说明等包含在一个统一的页面中，以便统一使用CSS样式进行装饰。
最后，关于section元素的使用禁忌总结如下：
❑不要将section元素用作设置样式的页面容器，因为那是div元素的工作。
❑如果article元素、aside元素或nav元素更符合状况，不要使用section元素。
❑不要为没有标题的内容区块使用section元素。
3.1.3 nav元素
nav元素是一个可以用来作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等，这时使用footer元素是最恰当的。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。
接着让我们来看一个nav元素的使用示例，在这个示例中，一个页面由几个部分组成，每个部分都带有链接，但只将最主要的链接放入nav元素中，如代码清单3-7所示。
代码清单3-7 nav元素示例
＜body＞
＜h1＞技术资料＜/h1＞
＜nav＞
＜ul＞
＜li＞＜a href="/"＞主页＜/a＞＜/li＞
＜li＞＜a href="/events"＞开发文档＜/a＞＜/li＞
...more...
＜/ul＞
＜/nav＞
＜article＞
＜header＞
＜h1＞HTML 5与CSS 3的历史＜/h1＞
＜nav＞
＜ul＞
＜li＞＜a href="#HTML5"＞HTML 5的历史＜/a＞＜/li＞
＜li＞＜a href="#CSS3"＞CSS 3的历史＜/a＞＜/li＞
...more...
＜/ul＞
＜/nav＞
＜/header＞
＜section id="HTML 5"＞
＜h1＞HTML 5的历史＜/h1＞
＜p＞讲述HTML 5的历史的正文＜/p＞
＜/section＞
＜section id="CSS 3"＞
＜h1＞CSS 3的历史＜/h1＞
＜p＞讲述CSS 3的历史的正文＜/p＞
＜/section＞
...more...
＜footer＞
＜p＞
＜a href="?edit"＞编辑＜/a＞ |
＜a href="?delete"＞删除＜/a＞ |
＜a href="?rename"＞重命名＜/a＞
＜/p＞
＜/footer＞
＜/article＞
＜footer＞
＜p＞＜small＞版权所有：陆凌牛＜/small＞＜/p＞
＜/footer＞
＜/body＞
在这个例子中，第一个nav元素用于页面导航，将页面跳转到其他页面上（跳转到网站主页或开发文档目录页面）；第二个nav元素被放置在article元素中，用来实现在这篇文章中的两个组成部分的页内导航。
具体来说，nav元素可以用在以下场合：
❑传统导航条
现在主流网站上都有不同层级的导航条，用来将当前画面跳转到网站的其他主要页面。可以用nav元素实现导航条。
❑侧边栏导航
现在主流博客网站及商品网站上都有侧边栏导航，用来将页面从当前文章或当前商品跳转到其他文章或其他商品页面。可以用nav元素实现侧边栏导航。
❑页内导航
可以用nav元素实现页内导航，用来在本页面几个主要组成部分之间跳转。
❑翻页操作
nav元素可以用在多个页面的前后页或博客网站的前后篇文章的滚动中。
除此之外，nav元素也可以用在其他所有你觉得重要的、基本的导航链接组中。
注意，在HTML 5中不要用menu元素代替nav元素。过去很多Web应用程序的开发人员喜欢用menu元素进行导航，有必要再次强调的是，menu元素是被用在一系列发出命令的菜单上的，是一种交互性的元素，或者更确切地说是使用在Web应用程序中的。
3.1.4 aside元素
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
aside元素主要有以下两种使用方法。
1）包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等。
这部分代码如代码清单3-8所示。
代码清单3-8 文章内部的aside元素示例
＜!DOCTYPE html＞
＜head＞
＜meta charset="utf-8"＞
＜title＞aside元素示例＜/title＞
＜/head＞
＜body＞
＜header＞
＜h1＞F#入门＜/h1＞
＜/header＞
＜article＞
＜h1＞第四节 词法闭包＜/h1＞
＜p＞lambda表达式可以创建词法闭包...(文章正文)＜/p＞
＜aside＞
＜!-- 因为这个aside元素被放置在一个article元素内部,
所以分析器将这个aside元素的内容理解成是和article元素的内容相关联的。 --＞
＜h1＞名词解释＜/h1＞
＜dl＞
＜dt＞F#＜/dt＞
＜dd＞F#为.Net2010中引入的新型函数型编程语言＜/dd＞
＜/dl＞
＜dl＞
＜dt＞词法闭包＜/dt＞
＜dd＞词法闭包是指,将创建lambda表达式时的环境保存起来...(详细解释)＜/dd＞
＜/dl＞
＜/aside＞
＜/article＞
＜/body＞
程序运行结果如图3-1所示。
图3-1 aside元素示例
这是笔者博客网页中的一篇文章，网页的标题放在header元素中，在header元素的后面将所有关于文章的部分放在一个article元素中，将文章的正文部分放在一个p元素中，但是该文章还有一个名词解释的附属部分，用来解释该文章中的一些名词，因此，在p元素的下部又放置了一个aside元素，用来存放名词解释部分的内容。
2）在article之外元素使用，作为页面或站点全局的附属信息部分。最典型的形式是侧边栏，其中的内容可以是友情链接、博客中其他文章列表或广告单元等。
下面这个示例为标准博客网页中一个侧边栏的示例，示例中的“IT新技术”为博客的名称，如代码清单3-9所示。
代码清单3-9 侧边栏示例
＜aside＞
＜nav＞
＜h2＞评论＜/h2＞
＜ul＞
＜li＞
＜a href="http://blog.sina.com.cn/1683"＞erway＜/a＞ 10-24 14:25
＜/li＞
＜li＞
＜a href="http://blog.sina.com.cn/u/1345"＞太阳雨＜/a＞ 10-22 23:48＜br/＞
＜a href="http://blog.sina.com.cn/s/blog_6a9kv8f.html#comment"＞
顶,拜读一下老牛的文章
＜/a＞
＜/li＞
＜li＞
＜a href="http://blog.sina.com.cn/u/1259295385"＞新浪官博＜/a＞
08-12 08:50＜br/＞
＜a href="#"＞恭喜！您已经成功开通了博客＜/a＞
＜/li＞
＜/ul＞
＜/nav＞
＜/aside＞
如果对这部分也加上CSS样式，在浏览器中的显示效果如图3-2所示。
图3-2 用aside元素实现的侧边栏示例
该示例为一个典型的博客网站中的侧边栏部分，因此被放在aside元素中，但是该侧边栏又具有导航的作用，因此被放置在nav元素中，该侧边栏的标题是“评论”，被放在h2元素中，在标题之后使用一个ul列表，用来存放具体的导航链接。
3.1.5 time元素与微格式
首先来说一下微格式，它是一种利用HTML的class属性来对网页添加诸如新闻事件发生的日期和时间、个人电话号码、企业邮箱之类的附加信息的方法。
微格式并不是在HTML 5之后才有的，在HTML 5之前它就和HTML结合使用了，但是使用过程中在日期和时间的机器编码上出现了一些问题，编码过程中会产生一些歧义。HTML 5增加了一种新的元素来无歧义地、明确地对机器编码日期和时间，并且以让人易读的方式来展现。这个元素就是time元素。
time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。它可以定义很多格式的日期和时间，如下所示。
＜time datetime="2010-11-13"＞2010年11月13日＜/time＞
＜time datetime="2010-11-13"＞11月13日＜/time＞
＜time datetime="2010-11-13"＞我的生日＜/time＞
＜time datetime="2010-11-13T20:00"＞我生日的晚上8点＜/time＞
＜time datetime="2010-11-13T20:00Z"＞我生日的晚上8点＜/time＞
＜time datetime="2010-11-13T20:00+09:00"＞我生日的晚上8点的美国时间＜/time＞
在编码时机器读到的部分在datetime属性里，而元素的开始标记与结束标记中间的部分显示在网页上。datetime属性中日期与时间之间要用“T”文字分隔，“T”表示时间。注意倒数第二行，时间加上Z字母表示对机器编码时使用UTC标准时间，倒数第一行则加上了时差，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差。
3.1.6 pubdate属性
putdate属性是一个可选的boolean值的属性，它可以被应用到article元素中的time元素上，意思是time元素代表了文章（artilce元素的内容）或整个网页的发布日期，putdate属性的具体使用方法如代码清单3-10所示。
代码清单3-10 putdate与time结合使用（一）
＜article＞
＜header＞
＜h1＞苹果＜/h1＞
＜p＞发布日期
＜time datetime="2010-10-29" pubdate＞2010年10月29日＜/time＞
＜/p＞
＜/header＞
＜p＞苹果,植物类水果,多次花果...("苹果"文章正文)＜/p＞
...
＜/article＞
你也许会疑惑为什么需要用到pubdate属性，为什么不能认为time元素就直接表示了文章或网页的发布日期呢？来看代码清单3-11。
代码清单3-11 putdate与time结合使用（二）
＜article＞
＜header＞
＜h1＞关于＜time datetime=2010-10-29＞10月29日＜/time＞的舞会通知＜/h1＞
＜p＞发布日期:
＜time datetime=2010-10-11 pubdate＞2010年10月11日＜/time＞
＜/p＞
＜/header＞
＜p＞大家好:我是法律系3年级学生代表,......(关于舞会的通知)＜/p＞
＜/article＞
这个示例中有两个time元素，分别定义了两个日期——一个是舞会日期，另一个是通知发布日期。由于都使用了time元素，所以需要使用pubdate属性表明哪个time元素代表通知的发布日期。
3.2 新增的非主体结构元素
除了以上几个主要的结构元素之外，HTML 5内还增加了一些表示逻辑结构或附加信息的非主体结构元素。
3.2.1 header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格、搜索表单或相关的LOGO图片。
很明显，整个页面的标题应该放在页面的开头，我们可以用如下形式书写页面的标题。
＜header＞＜h1＞页面标题＜/h1＞＜/header＞
需要强调的一点是，一个网页内并不限制只能有一个header元素，可以拥有多个，可以为每个内容区块加一个header元素，如代码清单3-12所示。
代码清单3-12 多个header元素示例
＜header＞
＜h1＞网页标题＜/h1＞
＜/header＞
＜article＞
＜header＞
＜h1＞文章标题＜/h1＞
＜/header＞
＜p＞文章正文＜/p＞
＜/article＞
在HTML 5中，一个header元素通常包括至少一个heading元素（h1～h6)，也可以包括我们后面将要讨论的hgroup元素，也可以包括其他元素（譬如table或form），根据最新的W3C HTML 5标准，还可以包括nav元素。
最后，让我们看一下博客网页中header元素的一个应用示例，示例中header元素处于页面顶部，详见代码清单3-13。
代码清单3-13 博客网页中header元素示例
＜header＞
＜hgroup＞
＜h1＞IT新技术＜/h1＞
＜a href="http://blog.sina.com.cn/itnewtech"＞
http:// blog.sina.com.cn/itnewtech
＜/a＞
＜a href="#"＞[订阅]＜/a＞
＜a href="#"＞[手机订阅]＜/a＞
＜/hgroup＞
＜nav＞
＜ul＞
＜li＞首页＜/li＞
＜li＞＜a href="http://blog.sina.com.cn/articlelist1.html"＞博文目录＜/a＞＜/li＞
＜li＞＜a href="http://photo.blog.sina.com.cn/itnewtechl"＞图片＜/a＞＜/li＞
＜li＞＜a href="http://photo.blog.sina.com.cn/itnewtech"＞关于我＜/a＞＜/li＞
＜/nav＞
＜/header＞
如果对这段代码使用CSS样式，显示界面如图3-3所示。
图3-3 博客网页中header元素示例
3.2.2 footer元素
footer元素可以作为其上层父级内容区块或一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接以及版权信息等。
在HTML 5出现之前，我们使用下面的方式编写页脚，如代码清单3-14所示。
代码清单3-14 HTML 5之前的页脚示例
＜div id="footer"＞
＜ul＞
＜li＞版权信息＜/li＞
＜li＞站点地图＜/li＞
＜li＞联系方式＜/li＞
＜/ul＞
＜div＞
但是HTML 5出现之后，这种方式将不再使用，而是使用更加语义化的footer元素来替代，如代码清单3-15所示。
代码清单3-15 footer元素示例
＜footer＞
＜ul＞
＜li＞版权信息＜/li＞
＜li＞站点地图＜/li＞
＜li＞联系方式＜/li＞
＜/ul＞
＜/footer＞
与header元素一样，一个页面中也不限制只可以用一个footer元素。同时，可以为article元素或section元素添加footer元素，来看下面两个示例。
代码清单3-16为一个在article元素中添加footer元素的示例。
代码清单3-16 在article元素中添加footer元素
＜article＞
文章内容
＜footer＞
文章的脚注
＜/footer＞
＜/article＞
代码清单3-17为一个在section元素中添加footer元素的示例。
代码清单3-17 在section元素中添加footer元素
＜section＞
分段内容
＜footer＞
分段内容的脚注
＜/footer＞
＜/section＞
3.2.3 address元素
address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、文档作者或文档维护者的网站链接、电子邮箱、真实地址、电话号码等。address应该不只是用来呈现电子邮箱或真实地址，还可以用来展示跟文档相关的联系人的所有联系信息。譬如，代码清单3-18中展示了一些博客中某篇文章评论者的名字及其在博客中的网址链接。
代码清单3-18 address元素示例
＜address＞
＜a href=http://blog.sina.com.cn/itnewtech＞陆凌牛＜/a＞
＜a href=http://blog.sina.com.cn/zhangyu＞张玉＜/a＞
＜a href=http://blog.sina.com.cn/baiquanli＞白权立＜/a＞
＜/address＞
下面通过代码清单3-19来查看如何结合使用footer元素、time元素与address元素。
代码清单3-19 footer、time与address结合使用
＜footer＞
＜div＞
＜address＞
＜a title="文章作者：陆凌牛"href="http://blog.sina.com.cn/itnewtech"＞陆凌牛＜/a＞
＜/address＞
发表于＜time datetime="2010-10-04"＞2010年10月4日＜/time＞
＜/div＞
＜/footer＞
在这个示例中，把博客文章的作者、博客的主页链接作为作者信息放在address元素中，把文章发表日期放在time元素中，把这个address元素与time元素中的总体内容作为脚注信息放在footer元素中。
3.2.4 main元素
main元素表示网页中的主要内容。主内容区域指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容。该区域应该为每一个网页中所特有的内容，不能包含整个网站的导航条、版权信息、网站LOGO、公共搜索表单等整个网站内部的共同内容。
每个网页内部只能放置一个main元素。不能将main元素放置在任何article、aside、footer、header或nav元素内部。
注意，由于main元素不对页面内容进行分区或分块，所以不会对下文所要描述的网页大纲产生任何影响。
main元素的一个使用示例如代码清单3-20所示。
代码清单3-20 main元素的使用示例
＜!DOCTYPE html＞
＜html＞
＜head＞
＜title＞2022年夏季 毕业典礼＜/title＞
＜/head＞
＜body＞
＜header＞
＜nav＞
＜ul＞
＜li＞＜a href="courses.html"＞课程＜/a＞＜/li＞
＜li＞＜a href="fees.html"＞学费＜/a＞＜/li＞
＜li＞＜a＞毕业＜/a＞＜/li＞
＜/ul＞
＜/nav＞
＜/header＞
＜main＞
＜h1＞毕业＜/h1＞
＜nav＞
＜ul＞
＜li＞＜a href="#ceremony"＞典礼＜/a＞＜/li＞
＜li＞＜a href="#graduates"＞毕业生＜/a＞＜/li＞
＜li＞＜a href="#awards"＞表彰＜/a＞＜/li＞
＜/ul＞
＜/nav＞
＜H2 id="ceremony"＞典礼＜/H2＞
＜p＞入场仪式＜/p＞
＜p＞毕业生代表发言＜/p＞
＜p＞学生会主席发言＜/p＞
＜p＞颁发毕业证书＜/p＞
＜p＞校长总结发言＜/p＞
＜h2 id="graduates"＞毕业生＜/h2＞
＜ul＞
＜li＞Eileen Williams＜/li＞
＜li＞Andy Maseyk＜/li＞
＜li＞Blanca Sainz Garcia＜/li＞
＜li＞Clara Faulkner＜/li＞
＜li＞Gez Lemon＜/li＞
＜li＞Eloisa Faulkner＜/li＞
＜/ul＞
＜h2 id="awards"＞表彰＜/h2＞
＜ul＞
＜li＞Clara Faulkner＜/li＞
＜li＞Eloisa Faulkner＜/li＞
＜li＞Blanca Sainz Garcia＜/li＞
＜/ul＞
＜/main＞
＜footer＞ Copyright 2012 常州市玉凌软件＜/footer＞
＜/body＞
＜/html＞
3.3 HTML 5中网页结构
前面两节详细介绍了在HTML 5中具体新增了哪些结构元素以及这些元素的定义和使用方法。在HTML 5中，可以使用这些结构元素来编排一份网页大纲，通过该网页大纲，我们可以一目了然地知道网页中具有哪些内容，网页中以什么样的结构形式来组织这些内容。
3.3.1 HTML 5中的大纲
在Word文档中，一份文档的大纲如下所示：
1.HTML 5的基础知识
1.1 HTML 5概述
（第1章中第1节的正文）
1.1.1 HTML 5是什么？
（第1章中第1节第1小节的正文）
1.1.2 HTML 5中的新增API
（第1章中第1节第2小节的正文）
HTML 5网页文档中的大纲也基本如此，只不过使用不同的结构元素进行表达而已。换句话说，在HTML 5中，使用各种结构元素所描述出来的整个网页的层次结构，就是该网页的大纲。因此，在组织这份大纲的时候，不能使用div元素，因为div元素只能当作容器，用在需要对网页中某个局部使用整体样式时。
许多工具可以对HTML 5的网页文档进行分析，然后将该文挡中的大纲以可视化的形式展现出来。http：//gsnedders.html5.org/outliner/网站中就有一个文档大纲分析器，可以针对代码清单3-21中所示文档进行分析，分析结果如图3-4所示。
图3-4 在线大纲分析器的分析结果
代码清单3-21 大纲分析工具测试用代码
＜!DOCTYPE html＞
＜head＞
＜meta charset="UTF-8"＞
＜title＞大纲分析＜/title＞
＜/head＞
＜section＞
＜h1＞HTML5的基础知识＜/h1＞
＜section＞
＜h2＞HTML5概述＜/h2＞
(正文)
＜section＞
＜h3＞HTML5是什么？＜/h3＞
(正文)
＜/section＞
＜section＞
＜h3＞HTML5中的新增API＜/h3＞
(正文)
＜/section＞
＜/section＞
＜section＞
＜h2＞HTML5快速入门＜/h2＞
(正文)
＜section＞
＜h3＞HTML与XHTML＜/h3＞
(正文)
＜/section＞
＜/section＞
＜/section＞
图3-4中出现“1.Untitled Section”，是由于该网页文档中第一个元素即为section元素，缺乏整个网页标题元素。加入标题元素（＜h1＞元素），将代码清单3-21中的代码修改为代码清单3-22所示的代码，分析出来的大纲如图3-5所示。
图3-5 加入网页标题后的页面大纲
代码清单3-22 添加了header元素后的大纲分析工具测试用代码
＜!DOCTYPE html＞
＜head＞
＜meta charset="UTF-8"＞
＜title＞大纲分析＜/title＞
＜/head＞
＜h1＞HTML5的基础知识＜/h1＞
＜section＞
＜h2＞HTML5概述＜/h2＞
(正文)
＜section＞
＜h3＞HTML5是什么？＜/h3＞
(正文)
＜/section＞
＜section＞
＜h3＞HTML5中的新增API＜/h3＞
(正文)
＜/section＞
＜/section＞
＜section＞
＜h2＞HTML5快速入门＜/h2＞
(正文)
＜section＞
＜h3＞HTML与XHTML＜/h3＞
(正文)
＜/section＞
＜/section＞
看到这里，你也许会问，如果光加一个＜h1＞元素，就可以分析出标题来，那么还需要header元素干什么？答案是h1元素一般用来显示文字标题。事实上，在要定义为网页标题的整个内容中，往往并不只是显示一段文字而已，其中还包括了大量的导航条、企业LOGO图片、广告f lash等，这些内容都可以放在一个header元素中，作为整个网页标题的内容，而标题文字为h1元素中的文字，在大纲中显示该标题文字。但是，这里要说明的是，header元素本身的作用不是被用来生成大纲的，大纲是依靠header元素中的h1～h6元素来生成的，如使用代码清单3-23中的代码生成的大纲如图3-6所示。
图3-6 header元素本身并没有用来生成大纲
代码清单3-23 在企业网站中使用图片来显示企业名称
＜!DOCTYPE html＞
＜head＞
＜meta charset="UTF-8"＞
＜title＞企业网站＜/title＞
＜/head＞
＜header＞
＜img src="title.jpg" alt="用来显示企业名称的图片"＞
＜/header＞
＜section＞
＜h2＞企业描述＜/h2＞
(正文)
＜/section＞
这里会产生这样一个问题，在很多企业网站（或其他网站）中，企业的标题并不是以文字来显示的，而是为了视觉效果，放在图片中显示的。难道这种情况就不能生成大纲了吗？笔者认为，这里有个小技巧，在header元素中，使用如下代码，既可以用图片来显示企业名称，又可以生成大纲。
＜header＞
＜h1＞＜img src="title.jpg" alt="企业名称"＞＜/h1＞
＜/header＞
在header元素中使用这段代码后，生成的大纲如图3-7所示。
图3-7 在header元素中使用图片来生成大纲
与header元素相同，footer元素中如果没有标题元素（h1～h6元素）也不用于生成大纲。
在代码清单3-21或代码清单3-23中的代码底部追加如下代码，生成的大纲将不会有任何变化。
＜footer＞
版权所有：陆凌牛
＜/footer＞
另外，对nav元素与aside元素来说，如果不在元素内部加入标题元素（h1～h6元素），生成大纲时会在该元素所在位置处添加一个“Untitled Section”的说明文字，但是根据HTML 5的开发文档记载，nav元素的作用为存放一组链接组，aside元素的作用为表示当前页面或文章的附属信息部分，允许不在这两个元素中添加标题，也就是说，大纲中存在对这两个元素的内容为“Untitled Section”的说明文字是合理的。
在代码清单3-21的代码底部添加如下代码，生成的大纲如图3-8所示。
图3-8 在文档的底部添加nav元素与aside元素
＜nav＞
＜ul＞
＜li＞＜a href="#"＞链接测试1＜/a＞＜/li＞
＜li＞＜a href="#"＞链接测试2＜/a＞＜/li＞
＜/ul＞
＜/nav＞
＜aside＞
侧边栏中的内容
＜/aside＞
另外，在HTML 5中，body元素、blockquote元素、fieldset元素、td元素、details元素及figure元素称为节根（sectioning root）元素。这些元素的共同特征是拥有自己独立的大纲，并且这些元素内的section元素、article元素、标题元素（h1～h6元素）、nav元素以及aside元素等，只用于生成其父元素的大纲时，而不用于生成父元素的上层祖先元素的大纲时。
在代码清单3-24中，blockquote元素内部有一个h1元素，正是因为这个h1元素是位于节根元素blockquote元素内部的，所以在针对blockquote元素的父元素body元素生成页面大纲时，该h1元素并没有显示在大纲中，如图3-9所示。
图3-9 针对body元素生成大纲时节根元素中的子元素不起作用
代码清单3-24 针对body元素生成大纲时节根元素中的子元素不起作用
＜!DOCTYPE html＞
＜meta charset="UTF-8"＞
＜body＞
＜h1＞网页标题＜/h1＞
＜blockquote＞
＜h1＞节根元素内部标题＜/h1＞
＜/blockquote＞
＜/body＞
3.3.2 大纲的编排规则
关于内容区块的编排，可以分为显式编排与隐式编排两种方式。
1. 显式编排内容区块
显式编排是指明确使用section等元素创建文档结构，在每个内容区块内使用标题（h1～h6、hgroup等），如代码清单3-25所示。
代码清单3-25 显式编排内容区块示例
＜body＞
＜h1＞网页级内容区块标题＜/h1＞
＜p＞网页级内容区块的正文＜/p＞
＜section＞
＜h2＞section级内容区块的标题＜/h2＞
＜p＞section级内容区块的正文＜/p＞
＜/section＞
＜/body＞
2. 隐式编排内容区块
所谓隐式编排，是指不明确使用section等元素，而是根据页面中所书写的各级标题（h1～h6、hgroup）等自动创建各级内容区块。因为HTML 5分析器只要看到书写了某个级别的标题，就会判断存在相对应的内容区块。代码清单3-26为一个隐式编排内容区块的示例。
代码清单3-26 隐式编排内容区块示例
＜body＞
＜h1＞网页级内容区块标题＜/h1＞
＜p＞网页级内容区块的正文＜/p＞
＜!--分析器根据h2等元素判断生成内容区块--＞
＜h2＞section级内容区块的标题＜/h2＞
＜p＞section级内容区块的正文＜/p＞
＜/body＞
将这两种编排方式进行对比，很明显，显式编排更加清晰明确、易读。
3. 标题分级
不同标题之间是有级别的，h1的级别最高，h6的级别最低。隐式编排时按如下规则自动生成内容区块。
❑如果新出现的标题比上一个标题级别低，生成下级内容区块。
❑如果新出现的标题比上一个标题级别高或级别相等，生成新的内容区块。
第一条规则的示例与前面一样，现在我们来看关于第二条规则的示例，如代码清单3-27所示。
代码清单3-27 第二条规则示例
＜body＞
＜section＞
＜h2＞section级别的内容区块的标题＜/h2＞
＜p＞section级别的内容区块的正文＜/p＞
＜!—因为下面的标题级别比上一个标题级别高,所以自动创建新的内容区块 --＞
＜h1＞新的section级别的内容区块的标题＜/h1＞
＜p＞新的section级别的内容区块的正文＜/p＞
＜/section＞
＜/body＞
如果把上一个示例改成显式编排，代码如代码清单3-28所示。
代码清单3-28 第二条规则的显式编排示例
＜body＞
＜section＞
＜h2＞section级别的内容区块的标题＜/h2＞
＜p＞section级别的内容区块的正文＜/p＞
＜/section＞
＜section＞
＜h1＞新的section级别的内容区块的标题＜/h1＞
＜p＞新的section级别的内容区块的正文＜/p＞
＜/section＞
＜/body＞
因为隐式编排容易让自动生成的整个文档结构与所想要的文档结构不一样，而且也容易引起文档结构混乱，所以尽量使用显式编排。
4. 不同的内容区块可以使用相同级别的标题
另外，不同的内容区块可以使用相同级别的标题。例如，父内容区块与子内容区块可以使用相同级别的标题h1。这样做的好处是，每个级别的标题都可以单独设计，如果既需要“整个网页的标题”，又需要“文章的标题”（譬如书写文档时），这样做将会带来很大的便利性，如同代码清单3-29所示。
代码清单3-29 不同的内容区块可以使用相同级别的标题
＜body＞
＜h1＞网页的标题＜/h1＞
＜article＞
＜header＞
＜hgroup＞
＜h1＞文章标题＜/h1＞
＜h2＞文章子标题＜/h2＞
＜/hgroup＞
＜p＞文章正文＜/p＞
＜/header＞
＜/article＞
＜/body＞
5. 网页编排示例
基于以上讲解过的知识点，我们来看应该怎样编排网页的内容。代码清单3-30为一个标准博客网页的示例，这个示例具备一个标准博客网页的基本要素，只缺少为了使用样式而补充添加的div元素。
代码清单3-30 网页编排示例
＜!DOCTYPE html＞
＜head＞
＜title＞网页编排示例＜/title＞
＜meta charset="UTF-8"＞
＜/head＞
＜body＞
＜!-- 网页标题 --＞
＜header＞
＜h1＞网页标题＜/h1＞
＜!-- 网站导航链接 --＞
＜nav＞
＜ul＞
＜li＞＜a href="index.html"＞首页＜/a＞＜/li＞
＜li＞＜a href="help.html"＞帮助＜/a＞＜/li＞
＜/ul＞
＜/nav＞
＜/header＞
＜!-- 文章正文 --＞
＜article＞
＜hgroup＞
＜h1＞文章主标题＜/h1＞
＜h2＞文章子标题＜/h2＞
＜/hgroup＞
＜p＞文章正文＜/p＞
＜!--文章评论 --＞
＜section class="comments"＞
＜article＞
＜h1＞评论标题＜/h1＞
＜p＞评论正文＜/p＞
＜/article＞
＜/section＞
＜/article＞
＜!-- 版权信息 --＞
＜footer＞
＜small＞版权所有：陆凌牛＜/small＞
＜/footer＞
＜/body＞
这个示例使用了嵌套artilce元素的方式，将关于评论的article元素嵌套在主article元素中，在HTML 5中，推荐使用这种嵌套article元素的方式。
3.3.3 对新的结构元素使用样式
因为很多浏览器尚未对HTML 5中新增的结构元素提供支持，我们无法知道客户端使用的浏览器是否支持这些元素，所以需要使用CSS追加如下声明，目的是通知浏览器页面中使用的HTML 5中新增元素都是以块方式显示的，如下所示。
// 追加block声明
article, aside, dialog, figure, footer, header, legend, nav, section, main
{ display: block; }
// 正常使用样式
nav{f loat;left;width:20%;}
article{f loat:right;width:79%;}
另外，Internet Explorer 8及之前的浏览器不支持用CSS的方法来使用这些尚未支持的结构元素，为了在Internet Explorer浏览器中也能正常使用这些结构元素，需要使用JavaScript脚本，如下所示。
// 在脚本中创建元素
＜script＞
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
document.createElement("main");
＜/script＞
＜style＞
// 正常使用样式
nav{f loat;left;width:20%;}
article{f loat:right;width:79%;}
＜/style＞
尽管这段JavaScript脚本在其他浏览器中是不需要的，但它不会对这些浏览器造成什么不良影响。另外，到了Internet Explorer 9之后，这段脚本就不需要了。