HTML5 大纲算法（HTML5 Outliner）

HTML大纲算法

HTML中存在着一个大纲算法，大纲可以为用户提供同一份页面的信息结构目录，就像之前我们在word和pdf文档中体验过的那样。

PDF文档中的目录结构：

pdf.gif

没有HTML5之前

HTML5之前的HTML4，唯一的方式是采用

~

元素来创建大纲。因为正常习惯下，

~

表示了从第一级到第六级的层级递减标题，而标题之下就应该是对应的内容了。

合理正确的使用标题元素可以为文档赋予一个良好结构的大纲，不单单对于搜索引擎的优化，更是为借助于屏幕阅读器浏览器网页的盲人（或弱视力）用户提供了巨大的帮助。

在非采用HTML5对网页进行重构的情况下，合理正确的使用标题元素依然可以为文档赋予一个良好结构的大纲，比如目前堂主博客的首页模板：

gg-测试插件.png

这个首页采用了如下的结构：

<body>
<h1>堂主 - WEB前端开发</h1>

<h2>博客导航</h2>
<ul>...</ul>

<h2>文章列表</h2>
  <ol>
    <li><h3>...</h3></li>
  </ol>

<h2>边栏应用标题...</h2>
  ...

</body>

现实不总是那么美好

但在某些情况下，比如一个标题下还需要一个副标题；或者网站本身是聚合性质的，内容都是以模块的形式从其他网站摘取、嵌入、拼合而成。那么这种情况下，原有技术基础上的大纲算法会提供一个灾难性的大纲目录。

比如我为我的博客名称添加一个副标题（或者在其他情景的时候会为一篇文章添加一个副标题；或者像现在流行的团购网站那样，在网站LOGO+名称的下面都会来上一句口号），就像我们经常在WordPress中做的那样：

wordpress中设置副标题.png

OK，我为我的博客增加了一个副标题，结构代码可能会变成下面这样：

<body>
<h1>堂主 - WEB前端开发</h1>
<h2>Code is art!</h2>
...

</body>

此时页面大纲会变成下面的样子：

添加副标题后的大纲.png

我这里只是增加了一个博客副标题，结果大纲目录中新增加出来一个标号为1的二级“Code is art !”标题，这会弄得屏幕阅读器用户晕头转向：因为这只是博客名称的副标题，而不是某块内容区域的实用性指向标题。无奈的替换办法一般是将这个副标题放入

中，并设置

来对段落中的内容进行说明。但这么做是在损害我们代码的语义性，因为这部分文字毕竟是一个标题而不是一段简单的内容文字。

试想如果一个网页是聚合类网页，里面呈现很多条从信息源网站摘取来的文章块（包括该文章的标题和简述），如果不同信息源的文章标题使用的元素还不一致（有的是

有的可能是根据自身页面上下文采用其他等级的H），那么该聚合网页的大纲会是多么的魔鬼！盲人用户会不会高呼“杀了我！”？

新技术带来的解脱

于是新的HTML5中定义了一个非常严谨的大纲算法，并且对语义性内容布局元素赋予了一个“开始新的节”的功能。个人理解，HTML5中，元素在大纲中的表现可以简单分为以下三类：

无作为

“无作为”是我个人对这类元素的称呼，它们在页面大纲中不会产生新的节。如下面的这段代码：

<div>这是一个没有语义的层</div>
<ul>
  <li>一个无序列表</li>
</ul>

在浏览器的“HTML5 Outliner”插件中（本文末尾会介绍2款浏览器中使用的插件）查看会如下呈现：

无作为的.png

大纲中没有子节，只有一个无标题的body根。

开始一个新的节

而像

、
、