如何正确使用基本 HTML5 部分以获得干净的文档大纲？

Question

一段时间以来，我一直在尝试弄清楚如何使用语义元素为任何类型的网页获取清晰的文档大纲。还有一些不确定因素让我很忙。

在尝试中，我基本上使用了应该在许多当代网站中找到的部分元素。为了测试，我使用了 HTML5 Outliner.

最让我困惑的是 <footer> 元素，它固执地从属于主要内容：

<header>
  <a href="#"><img src="[logo-image]"></a>
  <h2 class="screen-reader">Name of website</h2>
  <nav>
    <h2 class="screen-reader">Navigation</h2>
    <ul>
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
    </ul>
  </nav>
</header>

<main>
  <header>
    <h1>Page title</h1>
  </header>
  <section>
    <h2>Section I</h2>
    <section>
      <h3>Subsection a</h3>
    </section>
  </section>
  <section>
    <h2>Section II</h2>
    <section>
      <h3>Subsection a</h3>
    </section>
  </section>
</main>

<footer>
  <h3>Footer</h3>
</footer>

文档大纲如下所示：

网站名称
1. 导航
2. 页面标题
  1. 第一节
    1. 小节 a
  2. 第二节
    1. 小节 a
  3. 页脚

我用 <article> 包裹 <main> 的内容，用 <section> 包裹 <footer> 的内容解决了这个问题：

<main>
  <article>
    <header>
      <h1>Page title</h1>
    </header>
    <section>
      <h2>Section I</h2>
      <section>
        <h3>Subsection a</h3>
      </section>
    </section>
    <section>
      <h2>Section II</h2>
      <section>
        <h3>Subsection a</h3>
      </section>
    </section>
  </article>
</main>

<footer>
  <section>
    <h3>Footer</h3>
  </section>
</footer>

文档大纲如下所示，符合预期：

网站名称
1. 导航
2. 页面标题
  1. 第一节
    1. 小节 a
  2. 第二节
    1. 小节 a
3. 页脚

回答我的问题：

是否需要添加元素 <article> 和 <section> 以获得关于 <footer> 元素的清晰轮廓？我认为应该有其他更有意义的解决方案。因为我仍然不确定使用 <article> 是否也适用于不包含博客或杂志意义上的文章的网页。

我还想知道仅从大纲算法中排除 <nav> 等某些部分是否有意义。据我了解，文档大纲应该只包含网页的主要内容。

Answer 1

header、footer 和 main 元素未归类为“Sectioning content" and thus have no special effect on the document outline as it was initially intended in HTML5. That's why the HTML5 outliner (as well as the "Structural outline" tool in the Nu HTML Checker, ex-Validator) actually shows "Name of website" and "Page title" in your first example as the same level headings (top level): the scope of the first header is body, and the scope of the last footer is the implied section 由 h1 标题创建。

然而，这可能并不像看起来那么重要，因为不幸的是，no browser or assistive technology has implemented the HTML5 document outline algorithm (in any aspect except default styling of h1 headings) and the whole document outline concept is now being largely reconsidered。所以目前最实用的方法是把header、footer、nav、main想成原生的方式来表达相应的ARIA地标角色，而不是相关的东西标题结构，并使用标题级别构建文档大纲，就像 HTML5 之前一样。 Nu HTML 检查器将此结构显示为 "Heading-level outline".

如何正确使用基本 HTML5 部分以获得干净的文档大纲？

How to use basic HTML5 sections properly for a clean document outline?

html

outline