时间戳

首页 > 解决方案 > 如何为干净的文档大纲正确使用基本的 HTML5 部分？

html - 如何为干净的文档大纲正确使用基本的 HTML5 部分？

问题描述

我已经尝试了一段时间来弄清楚如何使用语义元素来为任何类型的网页获取干净的文档大纲。还有一些不确定性让我很忙。

在尝试中，我基本上使用了许多当代网站中应该找到的部分元素。为了测试，我使用了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. 网站名称
    1. 导航
    2. 页面标题
      1. 第一节
        1. a小节
      2. 第二节
        1. a小节
      3. 页脚

我通过将内容包装在<main>with中<article>并将内容包装在<footer>with中解决了这个问题<section>：

<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. 网站名称
    1. 导航
    2. 页面标题
      1. 第一节
        1. a小节
      2. 第二节
        1. a小节
    3. 页脚

回答我的问题：

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

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

标签： htmloutline

解决方案

、header和元素未被归类为“分段内容footer” ，因此对文档大纲没有特殊影响，因为它最初是在 HTML5 中设计的。这就是为什么 HTML5 大纲（以及Nu HTML Checker中的“结构大纲”工具，前验证器）实际上在您的第一个示例中将“网站名称”和“页面标题”显示为相同级别的标题（顶级） : 第一个的范围是，最后一个的范围是标题创建的隐含部分。mainheaderbodyfooterh1

然而，这可能并不像看起来那么重要，因为不幸的是，没有浏览器或辅助技术实现了 HTML5 文档大纲算法（除了标题的默认样式之外的任何方面h1），并且现在正在重新考虑整个文档大纲概念。所以目前最实用的方法是考虑用原生的方式来表达对应的 ARIA 标志性角色header，而不是与标题结构相关的东西footer，并用标题级别构建文档大纲，就像在 HTML5 之前一样。Nu HTML 检查器将此结构显示为“标题级大纲”。navmain

推荐阅读