注意:下面描述的HTML5大纲算法在用户代理中还没有实现，因此，使用标题语义的用户暴露在HTML4的文档结构下。HTML5对问题的描述还仅仅是理论上的。
HTML5新增了几个新元素使得开发者可以用标准语义去描述web文档的结构。本文描述了这些元素并说明如何使用这些元素去为任何文档定义纲要。
HTML4的文档结构
文档结构，即，<body>标记之间内容的语义结构，对呈现页面给用户是重要的。HTML4用文档中章节和子章节的概念去描述文档结构。一个章节由一个包含着标题元素（h1-h6）的div元素表示。这些html划分元素（HTML Dividing Elements）和标题元素（HTML Heading Elements）形成了文档的结构和纲要。
所以下面的片段
形成了如下的大纲：
1. Forest elephants 1.1 Habitat
HTML div元素（ {{HTMLElement("div")}} elements）并不强制性地定义一个章节。一个HTML 标题元素（ HTML Heading Element）的出现就足以意味着新的章节. 因此,
<h1>Forest elephants</h1>
<p>In this section, we discuss the lesser known forest elephants.
...this section continues...
<h2>Habitat</h2>
<p>Forest elephants do not live in trees but among them.
...this subsection continues...
<h2>Diet</h2>
<h1>Mongolian gerbils</h1>
形成如下的大纲:
1. Forest elephants 1.1 Habitat 1.2 Diet 2. Mongolian gerbils
HTML5解决的问题
HTML 4 的文档结构定义和其隐含的大纲算法非常粗糙而且造成了很多问题：
- 定义语义性章节的{{HTMLElement("div")}} 元素的用法,如果没有为class属性赋以特殊的值，使生成自动生成大纲的算法变得不可能 ("一个div元素{{HTMLElement("div")}} 是不是大纲的一部分, 定义的是章节还是子章节?" 或者 "该div元素 {{HTMLElement("div")}}是仅仅为了样式化?")。换句话说, HTML4规范在章节的定义和章节的范围都不精确。 自动生成大纲是重要的,尤其是在倾向于通过根据文档大纲内容去展示内容的辅助技术（ assistive technology）。 HTML5 在自动生成大纲算法的过程中去掉了div元素（{{HTMLElement("div")}}），并新增了一个元素，section元素（{{HTMLElement("section")}}）。
- 合并多个文档是困难的：主文档中包含子文档意味着改变HTML标题元素的级别，以使得文档大纲能够保持下来。 这个已经被HTML5的新的章节元素解决了，因为新引入的元素({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} 和 {{HTMLElement("aside")}}) 总是距离其最近的祖先章节的子章节, 与子文档章节内部的标题没有关系.
- HTML4中，所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的, 就像广告块和解释区域。 HTML5 引入aside元素 {{HTMLElement("aside")}}使得这样的节点不会插入到主纲要中。
- 另外, 因为在 HTML4中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段，比如logos,menus,目录或版权信息和法律声明。为了这个目的, HTML5 引入了三个特殊的节段 元素： 包含链接集合的nav元素{{HTMLElement("nav")}} , 例如目录, 包含网站相关信息的footer元素{{HTMLElement("footer")}} 和header元素 {{HTMLElement("header")}} 。
更具有普遍意义的是HTML5使得章节和标题特性更精确。使得文档大纲变的可预测，浏览器使用后也可以提高用户体验。
HTML5的大纲算法
在HTML5中定义章节
{{HTMLElement("body")}} 元素中的所有内容都是节段中的一部分。节段在HTML5中是可以嵌套的。Beside the main section, defined by the {{HTMLElement("body")}} element, section limits are defined either explicitly or implicitly. 显示定义的节段 是通过{{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}和 {{HTMLElement("nav")}} 这些标记中的内容。
Example:
<section> <h1>Forest elephants</h1> <section> <h1>Introduction</h1> <p>In this section, we discuss the lesser known forest elephants.</p> </section> <section> <h1>Habitat</h1> <p>Forest elephants do not live in trees but among them.</p> </section> <aside> <p>advertising block</p> </aside> </section> <footer> <p>(c) 2010 The Example company</p> </footer>
这个HTML片段定义了两个顶级节段：
<section> <h1>Forest elephants</h1> <section> <h1>Introduction</h1> <p>In this section, we discuss the lesser known forest elephants.</p> </section> <section> <h1>Habitat</h1> <p>Forest elephants do not live in trees but among them.</p> </section> <aside> <p>advertising block</p> </aside> </section> <footer> <p>(c) 2010 The Example company</p> </footer>
第一个节段有三个子节段：
<section> <h1>Forest elephants</h1> <section> <h1>Introduction</h1> <p>In this section, we discuss the lesser known forest elephants.</p> </section> <section> <h1>Habitat</h1> <p>Forest elephants do not live in trees but among them.</p> </section> <aside> <p>advertising block</p> </aside> </section> <footer> <p>(c) 2010 The Example company</p> </footer>
上面的片段形成了如下的大纲:
1. Forest elephants 1.1 Introduction 1.2 Habitat 1.3 Section (aside)
在HTML5中定义标题
当 HTML 节段元素定义文档结构时，文档大纲也需要有用的标题。基本规则是简单的：第一个 HTML 标题元素（{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}之一）定义了当前节段的标题
标题元素通过在元素里的名字加上数字来分级标题元素，{{HTMLElement("h1")}} 元素有最高级别，{{HTMLElement("h6")}} 有最低级别。相关的级别只在节段中起作用；节段的结构定义了大纲，而不是节段的标题。例如，下面的代码：
<section> <h1>Forest elephants</h1> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... <section> <h2>Habitat</h2> <p>Forest elephants do not live in trees but among them. ...this subsection continues... </section> </section> <section> <h3>Mongolian gerbils</h3> <p>In this section, we discuss the famous mongolian gerbils. ...this section continues... </section>
形成了下面的大纲:
1. Forest elephants 1.1 Habitat 2. Mongolian gerbils
注意标题元素的级别（例子中的第一个顶层节段的 {{HTMLElement("h1")}}，子节段中的{{HTMLElement("h2")}} 和第二个顶层节段中的{{HTMLElement("h3")}}）并不重要。（任何级别可以用作显示定义的节段的标题，虽然这种做法并不推荐。）
隐式分节
因为HTML5分节元素并不强制性定义大纲，为了与现有的占主导地位的HTML4保持兼容，有个方式来定义节段而不需要分节元素。这种方式就是隐式分节。
HTML标题元素 ({{HTMLElement("h1")}} 到 {{HTMLElement("h6")}}) 定义了一个新的，隐式的节段，当其不是父节段第一个标题时。这种隐式放置节段的方式通过在父节点中与之前标题的相对级别来定义。如果比之前的标题级别更低，那么在节段里开始新的隐式子节段。如代码所示：
<section> <h1>Forest elephants</h1> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... <h3 class="implicit subsection">Habitat</h3> <p>Forest elephants do not live in trees but among them. ...this subsection continues... </section>
形成如下的大纲:
1. Forest elephants 1.1 Habitat (implicitly defined by the h3 element)
如果与前面标题的级别相同，那么闭合前面的节段（可能是显式标记的节段！）并开始新的同一级别的隐式节段：
<section> <h1>Forest elephants</h1> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... <h1 class="implicit section">Mongolian gerbils</h1> <p>Mongolian gerbils are cute little mammals. ...this section continues... </section>
形成如下的大纲：
1. Forest elephants 2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)
如果比之前标题的级别更高，那么关闭之前的节段并开始新的这个更高级别的隐式节段：
<body> <h1>Mammals</h1> <h2>Whales</h2> <p>In this section, we discuss the swimming whales. ...this section continues... <section> <h3>Forest elephants</h3> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... <h3>Mongolian gerbils</h3> <p>Hordes of gerbils have spread their range far beyond Mongolia. ...this subsection continues... <h2>Reptiles</h2> <p>Reptiles are animals with cold blood. ...this subsection continues... </section> </body>
形成如下的大纲：
1. Mammals 1.1 Whales (implicitly defined by the h2 element) 1.2 Forest elephants (explicitly defined by the section element) 1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time) 1.4 Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
这并不是一眼就可以通过标题标记就可以看出来的大纲。为了使标记容易理解，用显式的标记开始和闭合节段以及匹配标题等级与期望的嵌套节段等级。然而，HTML5规范并不需要这样。如果你发现浏览器以不期望的方式渲染文档，检查是否有隐式的节段没有闭合。
一个经验法则就是标题级别应该与节段嵌套级别相匹配，方便节段在多个文档中的重用。例如，一个节段可能会存储在内容管理系统中并在运行时组装为完整的文档。在这种情况下，好的实践便是使用{{HTMLElement("h1")}}作为可重用部分的最高标题级别。可重用部分的嵌套级别应该取决于节段在文档结构中的出现位置。显式节段标记仍然在这种情况下有用处。
分节根
分节根是一个HTML元素，这个元素可以拥有自己的大纲，但是元素内部的节段和标题对其祖先的大纲没有贡献。与文档的逻辑分节根{{HTMLElement("body")}}元素相比，这些元素经常在页面中引入外部内容：{{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 和{{HTMLElement("td")}}。
Example:
<section> <h1>Forest elephants</h1> <section> <h2>Introduction</h2> <p>In this section, we discuss the lesser known forest elephants</p> </section> <section> <h2>Habitat</h2> <p>Forest elephants do not live in trees but among them. Let's look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p> <blockquote> <h1>Borneo</h1> <p>The forest element lives in Borneo...</p> </blockquote> </section> </section>
例子形成如下的大纲:
1. Forest elephants 1.1 Introduction 1.2 Habitat
This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.
这个大纲并不包含拥有内部大纲的 {{HTMLElement("blockquote")}} 元素
Sections outside the outline
HTML5 introduces four new elements that allow defining sections that don't belong to the main outline of a web document:
- The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.
- The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example, one with page internal links, like a table of content, and another one with site navigational links. These links are not part of the main flow and outline and can be typically initially not rendered by screen reader and similar assistive technology.
- The HTML Header Section Element ({{HTMLElement("header")}}) defines a page header, typically containing the logo and name of the site and possibly a horizontal menu. Despite its name, it is not necessarily positioned at the beginning of the page.
- The HTML Footer Section Element ({{HTMLElement("footer")}}) defines a page footer, typically containing the copyright and legal noticed and sometimes some links. Despite its name, it is not necessarily positioned at the bottom of the page.
Addresses and publication time in sectioning elements
The author of a document often wants to publish some contact information, such the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.
A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.
Similarly, the new HTML5 {{HTMLElement("time")}} element, with its {{htmlattrxref("pubdate", "time")}} boolean attribute set, represents the publication date associated to the whole document, respectively to the article, related to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.
Using HTML5 Elements in Non-HTML5 Browsers
Sections and headings elements should work in most non-HTML5 browsers. Though unsupported, they don't need a special DOM interface and they only need a specific CSS styling as unknown elements are styled as display:inline by default:
section, article, aside, footer, header, nav, hgroup {
display:block;
}
Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.
This method has its limitation though, as some browsers do not allow styling of unsupported elements. That is the case of the Internet Explorer (version 8 and earlier), which need a specific script to allow this:
<!--[if lt IE 9]>
<script>
document.createElement("header" );
document.createElement("footer" );
document.createElement("section");
document.createElement("aside" );
document.createElement("nav" );
document.createElement("article");
document.createElement("hgroup" );
document.createElement("time" );
</script>
<![endif]-->
This script means that, in the case of Internet Explorer (8 and earlier), scripting should be enabled in order to display HTML5 sectioning and headings elements properly. If not, they won't be displayed, which may be problematic as these elements are likely defining the structure of the whole page. That's why an explicit {{HTMLElement("noscript")}} element should be added for this case:
<noscript> <strong>Warning !</strong> Because your browser does not support HTML5, some elements are simulated using JScript. Unfortunately your browser has disabled scripting. Please enable it in order to display this page. </noscript>
This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:
<!--[if lt IE 9]>
<script>
document.createElement("header" );
document.createElement("footer" );
document.createElement("section");
document.createElement("aside" );
document.createElement("nav" );
document.createElement("article");
document.createElement("hgroup" );
document.createElement("time" );
</script>
<noscript>
<strong>Warning !</strong>
Because your browser does not support HTML5, some elements are simulated using JScript.
Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
</noscript>
<![endif]-->
Conclusion
The new sections and headings elements introduced in HTML5 bring the ability to describe the structure and the outline of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.