HTML5 大纲算法(outline algorithm)提供了将内容拆解成嵌套的区块的规则，每一个区块有一个标题。通过标准的算法来理解和解析网页结构，意味着每一个结构完备的网页自动带有一个“目录”，可以被诸如屏幕阅读器使用，或者用于聚合各部分内容。
查看 HTML5 大纲
- 对于 Chrome 浏览器，可以在 Chrome Web Store 搜索 HTML5 Outliner 插件，安装后再地址栏出现插件的图标，在任何页面都可用它来检测当前页面的大纲（不支持本地页面的查看）；
- 还可以用一个在线工具方便的查看 HTML5 大纲，支持上传页面，输入地址，HTML 代码的解析查看。
HTML5 大纲算法
如果查看自己博客的大纲，很可能在大纲输出中尽是 Untitled SECTION,Untitled ARTICLE 之类的字眼，我的博客便是如此。反映出虽然使用了 HTML5 的新的语义标签，但没有定义区块的标题，也是不会呈现一个良好的大纲结构的。
大纲算法简要规则：
- 将 body 元素作为根区块，所有其它页面区块都组织在下面；
- 把第一个标题内容元素作为 body 的标题；
- 对剩下的区块内容，定义并添加新的区块和子区块到大纲；
- 将每一个子区块的第一个标题内容元素作为那个区块的标题。
创建 HTML5 大纲
根据上述规则，将博客重新用大纲来定义。
标题内容包括 h1, h2, h3, h4, h5, h6 和 hgroup 元素，区块内容含有 article, aside, nav 和 section 元素。
对于标题内容元素，当排名低的标题元素处在排名高的标题元素的下面时，会嵌套在排名高的标题元素的区块里。若等于或高于前一个标题元素，就会隐形地创建一个新区块。
针对 Typecho 的模板，可以使用标题来创建大纲。导航部分使用了 nav 元素，在其中加入<h2>Main Menu</h2>这里对网站的标题使用了 h1，所以对它的子区块，都使用 h2 来创建。主题内容部分包含在一个 section 元素中，可将它置于 header.php 中，然后再在每个页面分别写标题，就可以针对不同的页面来构建不同的大纲。书中给出的另一种方案是将所有的标题转换为 h1，可通过 css 来重新定义大小。在这里，我用不同的排名标题元素来实现。两者都是可以的。作者引用标准：
“强烈建议开发者只用 h1 元素，或者为区块的嵌套级别来使用合适的排名标题元素。”
构建好的大纲如下：
首页
- Rainy’s Blog
- Main Menu
- Article List
- 一件小事
- 博客小改&问题总结
- 等你爱我，当我去爱时
- 晴，情，轻
- 雨，情，歉
- 书翻人生
- 用户至上——网站的可用性原则
- 漫谈响应式 web 设计
文章内页
- Rainy’s Blog
- Main Menu
- Article Content
- 一件小事
- Comment
- Leave Comment
关于页面
- Rainy’s BLog
- Main Menu
- Comment
- About
- ME
- BLOG
- CONTENT
- READER
- LINKS
- CONTACT
- GUESTBOOK
- ↓
- 29 Comments
- Leave Comment
- About
可以看到对页面构建大纲后，展现了清晰的结构。可访问性提高，对屏幕阅读器用户提供更好的指引。而且，一个结构良好的大纲，也是有利于 SEO 的。
细节笔记
- 第一个 h1 不需要区块，因为 body 就是它的区块。
- body 属于区块根(sectioning roots)这类元素内部可能含有一个大纲，但是如果被包含在另一个大纲里，它们内部的大纲会被隐藏。类似元素还包括 details, fieldset, figure 和 td 元素。
- hgroup 元素可以将一组标题元素放在一起，大纲算法只会处理其中排名最高的。
