javascript - 动态创建html时如何实现分层标题组织？

Question

wcag 2.0 规则之一是标题元素，即h1/h2/h3/等，应该指示文档结构。这意味着您不能跳过一个级别，例如：

<h1>main heading</h1>
...
<h3>subheading</h3>

无效，因为 h1 和 h3 之间没有 h2 元素。这是有效的（根据http://achecker.ca/checker/index.php），即使 h2 在 section 元素内：

<h1>Structure test: h1</h1>
<section>
  <h2>section heading: h2</h2>
</section>
<h3>2nd sub-sub-heading: h3</h3>

以下示例无效，因为最后一个 h3 在 h1 之后：

<h1>Structure test: h1</h1>
<h2>sub-heading: h2</h2>
<h3>sub-sub-heading: h3</h3>
<section>
  <h1>section heading: h1</h1>
</section>
<h3>2nd sub-sub-heading: h3</h3>

我正在编写将添加包含标题元素的内容的javascript，我想知道我应该如何选择我应该使用的标题元素（哪个级别），这样我就不会使文档无效？

Answer 1

在 HTML5 中，您可以使用h1元素内部section的元素来定义您的结构：

<section>
    <h1>Blah</h1>
    <p>Asdf asdf...</p>
    <section>
        <h1>Bleh</h1>
        <p>Asdf again...</p>
    </section>
</section>
<section>
    <h1>Another header</h1>
    <p>Qwerty...</p>
</section>

对其应用样式更难（因为您需要依赖类或一堆section>section>h1CSS 选择器），但我认为这是解决问题的最简单方法。