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

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

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

主标题
...
副标题

无效，因为h1和h3之间没有h2元素。这是有效的（根据），即使h2位于截面元素内：

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

结构测试：h1
章节标题：h2
第二小标题：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>

结构测试：h1
小标题：h2
小标题：h3
章节标题：h1
第二小标题：h3

---

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

在HTML5中，您可以使用

部分
元素中的
h1
元素来定义您的结构：

<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>


废话
Asdf Asdf

呜呜
Asdf再一次

另一个标题
Qwerty


对其应用样式比较困难（因为您需要依赖类或一堆
section>section>h1
CSS选择器），但我认为这是解决问题的最简单方法。
不起作用。即使我把最后一个例子放在节标记中，它也不能验证。我不知道验证器的算法是什么，也许它太旧了？我所知道的唯一最新的HTML5验证程序是，如果你想确保代码是可访问的，你应该在真正的软件上试用它。顺便说一句，现在我记得，对于规范，有类似的东西是非常有效的。我认为html5.validator.nu是一个html验证程序，而不是wcag验证程序。。。HTML5算法理解section>h1是一个比section>section>h1具有更多层次结构的头部。请阅读：我对您使用的验证器的看法是，它可能已经过时了，因此，它不明白如何处理分段。@比约恩我相信她的回答意味着，如果您使用
h1
-
h6
或在
分段
元素中使用
h1
元素，而不是将它们混合在一起，您的头痛就会少一些。也就是说，您的代码没有问题——如果验证器或WCAG本身不这么说，那么它们就错了（或者，更幸运的是，还没有赶上现代最佳实践）。