HTML5-需要关于大纲的解释吗

因此，假设我有以下结构：

<doctype html>
<header>
    <h1>Header</h1>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
</header>

<main>
    <h1>Main content</h1>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
</main>

<section>
    <h1>Sidebar</h1>
</section>

<doctype html>
<header>
  <h1>root</h1>
    <section>
      <h1>Header</h1>
      <article><h2>Article</h2></article>
      <article><h2>Article</h2></article>
    </section>
</header>

<main>
    <section>
      <h1>Main content</h1>
       <article><h2>Article</h2></article>
       <article><h2>Article</h2></article>
       <article><h2>Article</h2></article>
       <article><h2>Article</h2></article>
    </section>
</main>

<section>
    <h1>Sidebar</h1>
</section>

据我所知，这是不正确的。我认为应该是这样的：

1. Main content
    1. Header
       1. Article
       2. Article
    2. Article
    3. Article
    4. Article
    5. Article
    6. Sidebar

1. Header
       1. Article
       2. Article
2. Main content
       1. Article
       2. Article
       3. Article
       4. Article
3. Sidebar

为什么会发生这种情况？如果我使用

部分

元素，我可以得到所需的大纲。但是在HTML结构中有

main

元素，然后一切都中断了（至少对我来说，这不是我理解它的方式）

---

我可以使用

main

元素实现所需的轮廓吗？

我不知道为什么它不能在您的计算机上工作，但只需将

部分的
标记修改为
主体
标记即可
其工作
主
元素不是一个分段内容。请看一下HTML5.1草稿。此外，您还可以在Mozilla developer network上阅读有关概述算法的更多信息

据我所知，您不能真正做您想做的事情，因为在您的示例中，您的body元素（主元素）有多个h1。
创建显式的节结构；不要忘记，
不是剖切节点。在代码示例中，“Header”是根节点（级别#1），并隐式分配了两个“Article”子节点（级别#2）主内容“
与主“Header”处于同一级别（级别#1），并保存其余的隐式节节点；”同一级别（第2级）的第s条和最后一节。这是大纲视图查看结构的方式（裸骨旧式隐式）：


主要级别
后代
后代
主要级别
后代
后代
后代
后代
后代

为避免混淆，建议无条件地定义所需的截面结构：

<doctype html>
<header>
    <h1>Header</h1>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
</header>

<main>
    <h1>Main content</h1>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
    <article><h2>Article</h2></article>
</main>

<section>
    <h1>Sidebar</h1>
</section>

<doctype html>
<header>
  <h1>root</h1>
    <section>
      <h1>Header</h1>
      <article><h2>Article</h2></article>
      <article><h2>Article</h2></article>
    </section>
</header>

<main>
    <section>
      <h1>Main content</h1>
       <article><h2>Article</h2></article>
       <article><h2>Article</h2></article>
       <article><h2>Article</h2></article>
       <article><h2>Article</h2></article>
    </section>
</main>

<section>
    <h1>Sidebar</h1>
</section>


根
标题
; 它将图标放置在地址栏的右侧，单击时显示pade的大纲。
我以前从未听说过大纲视图。我认为这一点都不重要。如果您想以某种方式验证代码，那么使用像Outliner这样的验证器是非常重要的。特别是html5。你们在这里展示了显示良好结果的代码，当我检查你们的第一个示例时，我得到了一个不同的大纲。我得到了这个输出[]。非常感谢！我知道主要的是分段元素：）…需要时间来适应（radicali）新的htm5概念，基本上你可以把分段看作是一本书的目录。
<doctype html>
<h6>Grand-Grand</h6>
<!-- notice top level h6 -->
<section>
    <h6>Grand</h6>
    <article><h1>Minor</h1></article>
    <!-- and h1 at the bottom of outline tree -->
    <article><h1>Minor</h1></article>
</section>

<section>
    <h6>Grand</h6>
    <article><h1>Minor</h1></article>
    <article><h3>Minor</h3></article>
    <article><h4>Minor</h4></article>
    <article><h2>Minor</h2></article>
</section>

<section>
    <h5>Grand</h5>
</section>

<doctype html>
<h1>Grand-Grand</h1>
<section>
    <h1>Grand</h1>
    <article><h2>Minor</h2></article>
    <article><h2>Minor</h2></article>
</section>

<section>
    <h1>Grand</h1>
    <article><h2>Minor</h2></article>
    <article><h2>Minor</h2></article>
    <article><h2>Minor</h2></article>
    <article><h2>Minor</h2></article>
</section>

<section>
    <h1>Grand</h1>
</section>