HTML5区块和大纲算法
原文链接：
- Using HTML sections and outlines - Mozilla Developer Network
- 每集HTML5+CSS3网页布局教程-2大纲算法
HTML5标准带来了几个带有标准语义的新元素来描述Web文档结构。本文会介绍这些元素，并且讨论如何用这些元素定义令人满意的文档大纲。
HTML4时代的文档结构
文档的结构（或者可以说在body标签之间的结构）是展示和表现web页面的基础。HTML4使用了区块（sections）和子区块（sub-sections）的概念来描述文档的结构。使用div元素来定义一个区块，并且使用标题元素（h1-h6）来定义这个区块的标题。它们之间的关系决定了web文档的结构和大纲。
下面的这些代码：
<div class="section" id="forest-elephants" >
Forest elephants
In this section, we discuss the lesser known forest elephants.
...this section continues...
<div class="subsection" id="forest-habitat" >
Habitat
Forest elephants do not live in trees but among them.
...this subsection continues...
div>
div>
可以提炼出如下的大纲：
1. Forest elephants
1.1 Habitat定义一个大纲中的节点不一定非要使用div元素，其实，只要一个标题元素（h1-h6）就已经足够用来暗示一个节点了，所以这些标签：
<h1>Forest elephantsh1>
<p>In this section, we discuss the lesser known forest elephants.
...this section continues...
<h2>Habitath2>
<p>Forest elephants do not live in trees but among them.
...this subsection continues...
<h2>Dieth2>
<h1>Mongolian gerbilsh1>提炼出了如下的大纲：
2. Forest elephants
1.1 Habitat
1.2 Diet
3. Mongolian gerbils（译注：这段代码没有使用任何div标签，大纲是根据标题元素——例中为h1和h2——来提炼的）
HTML5解决的问题
在HTML4中，文档结构的定义和大纲的算法非常简陋，这带来了不少的问题：
【问题1】用div元素来定义具有语义的区块的话，没有特定的class就没法自动生成大纲（“这个div是大纲的一部分，用来定义区块或者子区块的？”还是“它仅仅就是个div，为了方便使用CSS用来做样式的？”），换句话说，HTML4在“什么是区块、区块的范围怎么定义”这些问题上很不明确。页面是否能自动生成大纲非常重要，因为大多数屏幕阅读器（为有视力障碍人士提供的辅助阅读技术）就是根据文档大纲来规整它们将要展示给用户的信息。而在HTML5中，大纲算法不再必须使用div元素，取代div的是一个新的元素——section.
【问题2】多文档的融合是个难题：引入一个从别处采集来的子文档很可能会改变标题元素的等级，而HTML4正事根据这些标题元素的等级来提炼大纲的。HTML5引入了一系列全新的定义区块的元素（article, section, nav和aside），这些元素有这样的特性：不管它内部的标题元素（h1-h6）是什么级别，它总是离它最近的祖先区块的子节点。
译者例：
<body>
<h3>h3标题h3>
<section>
<h1>h1标题h1>
<p>从其他文档引入的section区块p>
section>
<div>
<h2>h2标题h2>
<p>从其他文档引入的div区块p>
div>
body>上述代码提炼出的大纲如下：
1.h3标题
1.1.h1标题
2.h2标题可以看到，h1标题竟然成为了h3标题的子节点，这就是section元素的功劳了。因为不管它内部的标题元素是老大（h1）还是老六（h6），它都乖乖的成为离他最近的祖先节点（body）的子节点。再看div，虽然理论上应该也是body的子节点，但由于h2的级别高于h3（h3是body的标题），所以在大纲中竟和body变成了同级节点。
【问题3】在HTML4中，每个节点都是大纲的一部分。但web文档有时候并不是线性的。web文档有时可能会包含特殊的区块来承载信息，但这些信息并不属于主文档的一部分，比如广告和注释。HTML5引入了aside元素，该元素不会作为大纲的节点而成为大纲的一部分。
【问题4】同样的，在HTML4中，由于每个节点都是大纲的一部分，所以也没有适合的区块来承载logo、菜单、目录、版权信息和法律条款等这些信息，因为这些信息和web页面的内容无关，而是和web站点有关。为了解决该问题，HTML5同样引入了三个新元素：①用来承载链接（例如导航菜单和目录）的nav元素②用来承载web站点相关信息的header元素③用来承载web站点相关信息的footer元素。请注意header和footer和section不同，它们不会在大纲中出现，只负责语义性的描述一个区块（译注：有点类似div，但具有语义）。
总而言之，HTML5带来了更准确的区块和标题功能，这使得文档的可控性更强，而且更容易被浏览器使用，从而更好地提高用户体验。
HTML5的大纲算法
让我们来看看大纲算法是如何提炼区块和标题的。
body元素中所有元素都是节点。除了body元素定义的主节点，定义节点可以分为“显性定义的节点”和“隐性定义的节点”两种（以下下简称为“显性节点”和“隐性节点”）。
1.显性定义节点
显性节点使用
、