HTML5文档大纲

课后整理 2021-1-7

HTML5对如何处理位于article、aside、nav 和section等元素中的h1～h6有一套算法。该算法通常称为HTML5文档大纲。不过，目前还没有浏览器实现这套算法，在屏幕阅读器中只有JAWS（一款运行于Windows下的屏幕阅读器）支持，而它的实现还存在问题。鉴于此，W3C已经将文档大纲列入可能从最终定稿的规范中移除的特性。即便文档大纲最终留在规范中，或者浏览器将其实现了，我们还是可以按照本节方法对分级标题进行标记。这种方法不仅适用于当前环境，还足以应对未来，因为文档大纲不会对页面造成破坏。

定义文档节段

在HTML5文档中，节段是一个很重要的概念，它表示一个语义独立的内容块。能够定义节段的元素包括：body、section、article、aside、nav、header、footer。

节段可以相互嵌套，形成嵌套的结构层次关系。每个节段都必须有自己的标题，即使是嵌套的内层节段，标题使用h1、h2、h3、h4、h5、h6元素之一标识。

【示例1】下面示例定义了两个顶级节段，第一个节段有三个子节段。

<body>
<h1>[网页标题]</h1>
<section>
    <h1>[区块标题]</h1>
    <section>
        <h1>[子区块1标题]</h1>
        <p>[正文内容]</p>
    </section>
    <section>
        <h1>[子区块2标题]</h1>
        <p>[正文内容]</p>
    </section>
    <aside>
        <h1>[侧栏标题]</h1>
        <p>[侧栏内容]</p>
    </aside>
</section>
<footer>
    <h1>[页脚标题]</h1>
    <p>[版权信息]</p>
</footer>
</body>

在http://gsnedders.html5.org/outliner/页面在线提交本示例文档，梳理文档的层次结构，则上面代码片段形成如图26所示的大纲。

图7 提取示例文档纲要信息

在节段内，第一个HTML标题元素定义了当前节段的标题。在同一个节段内，h1表示最高级别，h6表示最低级别。标题的级别只在节段内有参考价值，不同节段之间没有可比性。

【示例2】下面示例演示了不同节段结构中，标题元素的级别并不重要。

<body>
<h1>[网页标题]</h1>
<section>
    <h1>[区块标题]</h1>
    <section>
        <h1>[子区块1标题]</h1>
        <p>[正文内容]</p>
    </section>
</section>
<footer>
    <h3>[页脚标题]</h3>
    <p>[版权信息]</p>
</footer>
</body>

在上面示例中的第一个顶层节段的h1，子节段中的h2，以及第二个顶层节段中的h3，就没有可比性，这时h1和h3属于同一个层级，重要性平等，如图8所示。

图8 不同级别标题在不同节段中的地位比较

注意，任何级别标题元素都可以用作显示定义的节段的标题，不过不推荐这种无主次的做法。

隐式分节

HTML5分节元素不会强制性定义大纲，为了与HTML4保持兼容，有一种方式来定义节段，而不需要分节元素，这种方式就是隐式分节。

当标题元素（h1到h6）不是父节段的第一个标题时，它会隐式定义一个新的节段。这种隐式节段通过在父节点中与之前标题的相对级别来确定。如果比之前的标题级别更低，那么就会定义一个新的子节段。

【示例1】下面示例使用标题元素进行分节，演示效果如图9所示。

<body>
<h1>[网页标题]</h1>
<section>
    <h1>[区块标题1]</h1>
    <p>[正文内容]</p>
    <h2>[区块标题2]</h2>
    <p>[正文内容]</p>
    <h3>[区块标题3]</h3>
    <p>[正文内容]</p>
</section>
</body>

图9 不同级别标题在同一节段中的地位比较

【示例2】如果与之前标题的级别相同，那么就会开始一个新的同级隐式节段，效果如图10所示。

<body>
<h1>[网页标题]</h1>
<section>
    <h1>[区块标题1]</h1>
    <p>[正文内容]</p>
    <h1>[区块标题2]</h1>
    <p>[正文内容]</p>
    <h3>[区块标题3]</h3>
    <p>[正文内容]</p> 
</section>
</body>

图10 同级别标题在同一节段中的层次比较

【示例3】如果比之前标题的级别更高，那么就会开始一个更高级别的隐式节段，效果如图11所示。

<h1>[网页标题]</h1>
<section>
    <h2>[区块标题1]</h2>
    <p>[正文内容]</p>
    <h3>[区块标题2]</h3>
    <p>[正文内容]</p>
    <h1>[区块标题3]</h1>
    <p>[正文内容]</p> 
</section>
</body>

图11 通过高级别标题隐式提升节段层次

【注意】

作为经验法则，标题级别应该与节段嵌套级别相匹配，但为了方便节段在多个文档中的重用，也存在例外的情况。例如，一个节段可能会存储在内容管理系统中并在运行时组装为完整的文档。在这种情况下，建议使用h1作为可重用部分的最高标题级别。

特殊分节

1. 分节根

分节根拥有独立的大纲体系，其内的节段与外部大纲没有联系。使用blockquote、details、fieldset、figure、td可以定义分节根元素。

【示例】下面示例设计一个多层嵌套的大纲。

<body>
<h1>[网页标题]</h1>
<section>
    <h1>[区块标题]</h1>
    <section>
        <h2>[子区块1标题]</h2>
        <p>[正文内容]</p>
        <figure>
            <h1>[流媒体标题]</h1>
            <img  src="images/1.jpg" />
        </figure>
    </section>
    <section>
        <h2>[子区块2标题]</h2>
        <p>[正文内容]</p>
        <blockquote>
            <h1>[块引用标题]</h1>
            <p>[正文内容]</p>
        </blockquote>
    </section>
</section>
</body>

这个大纲并不包含blockquote元素的内部大纲，也不包含figure元素的内部大纲，如图12所示。blockquote元素是一个外部引用，是一个分节根并隔离了内部的大纲。figure元素是一个流媒体容器，内部内容与外部内容类型不同，不能够相提并论，因此也被隔离为一个独立的纲要系统。

图12 文档大纲不包含分节根内大纲

2. 主纲之外的节段

下面4个元素用来定义不属于文档主要大纲中的节段。