3.3 HTML 5结构
前面两节中详细介绍了在HTML 5中具体新增了哪些结构元素，以及这些元素的定义和使用方法。在HTML 5中，可以使用这些结构元素来编排一份网页大纲，通过该网页大纲可以对网页中具有哪些内容，网页中以什么样的结构形式来组织这些内容有更清楚的认识。
3.3.1 大纲（1）
在Word文档中，一份文档的大纲如图3-4所示。
HTML 5网页文档中的大纲也基本如此，只不过使用不同的结构元素进行表达而已。换句话说，在HTML 5中，使用各种结构元素所描述出来的整个网页的层次结构就是该网页的大纲。因此，在组织这份大纲时，不能使用div元素，因为div元素只能作为容器，在需要对网页中某个局部使用整体样式时才使用。
可以通过许多工具对HTML 5的网页文档进行分析，然后将该文档中的大纲以可视化的形式展现出来。前面提到的"http：//gsnedders.html5.org/outliner/"网站中就有一个文档大纲分析器，利用该分析器对代码清单3-22中的文档进行分析，结果如图3-5所示。
代码清单3-22 大纲分析工具测试用代码
<!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-5 在线大纲分析器的分析结果
图3-5中出现"1.Untitled Section",是由于该网页文档中第一个元素即为section元素，缺乏整个网页标题元素。加入标题元素（<h1>元素），将代码清单3-22中的代码修改为代码清单3-23所示的代码，分析出来的大纲如图3-6所示。
代码清单3-23 添加了标题元素后的大纲分析工具测试用代码
<!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>
相关HTML 5与CSS 3权威指南：大纲