本节书摘来自异步社区《html5开发手册》一书中的第1章，第1.10节,作者： 【美】chuck hudson , 【英】tom leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。
利用前面讲到的新元素，我们现在可以使页面内容更加连贯，更有逻辑，并允许人们使用这种层次结构（比如使用屏幕阅读器）来浏览我们的内容，获得与浏览目录一样便捷的体验。对大纲进行测试可以帮助检查是否正确地使用了标题和section。有很多的浏览器插件和网站应用可供你选择。
下载并安装后，在地址栏可以看到如图1.11所示的图标。
点击图标会显示类似目录的数据，其中内容通常是缩进的。
如果内容安排合理，显示的将是结构整齐、有逻辑的目录。如果看到有“untitled section/article”，这通常代表使用了错误的标记，需要重新检查所使用的标记。需要注意的是，nav和aside标记中出现的“untitled article”无需计较。
正确的大纲与下面类似：
1．网站名
a．博客
i．文章题目
ii．文章题目
b．关于我
i．我的名字
ii．我喜欢的东西
iii．我讨厌的东西
c．联系我
图1.12所示为某个文档大纲的示例，缩进是正确的，而且没有“untitled section”（nav中的无需考虑）。
在此“菜谱”中建立的页面的大纲如下所示：
1．loads of news
a．bring you all kinds of news!
b．untitled nav
c．sports news
d．entertainment news!
e．nerdy news
代码1.12所示为该页面的源代码。
代码1.12 创建一个基本的文档大纲
在页面顶端有一个header元素，在大纲中用作第一个节点（而不是页面标题），然后是各自包含标题的section元素。header元素中还有一个内容为“bringing you all kinds of news!”的hgroup元素，但是大纲中并没有出现h2元素。这是因为大纲只读取元素中的第一个标题（h1～h6）。
section、article、nav和aside元素在大纲中显示的时候会有缩进。section包含了h1，所以在大纲中正常显示。也可以使用其他标题标记（h2或h3）替换。如果某个section中有内容而没有标题，那么大纲会显示“untitled section”，你需要避免这种情况。