HTML Header 语义

Question

作为大学课程的一部分，我正在做一个 HTML 语义练习，最后我很好奇 headers 应该以哪种方式布置。让我举两个例子：

示例 1：

<main>
  <header>
    <h1>Main Header</h1>
  </header>
  <section>
    <header>
      <h1>Section Header</h1>
    </header>
    <p>Some content</p>
  </section>
</main>

示例 2：

<main>
  <header>
    <h1>Main Header</h1>
  </header>
  <section>
    <header>
      <h2>Section Header</h2>
    </header>
    <p>Content here</p>
  </section>
</main>

我的主要疑惑是您在各部分中使用了 h1 或 h2。如果我理解正确，示例 1 在语义上更正确，因为（至少在 chrome 中）原始 html 将以 headers 部分较小的方式设置样式。但是，之前我已经使用了示例 2 中的方法，并且在第 1 年的 class 中，我从未被告知这是不正确的。

因为在这个练习中我要根据语义评分，并且因为我需要满足我的好奇心，所以我很想知道哪个更正确。

Answer 1

来源：http://w3c.github.io/html/sections.html#headings-and-sections

"Sections may contain headings of a rank equal to their section nesting level. Authors should use headings of the appropriate rank for the section’s nesting level."

示例 2 似乎是 W3C 建议在该引用之后的以下示例中使用的内容。

这可能都是基于意见的，所以我用这些信息结束这个问题。

HTML Header 语义

HTML Header Semantics

html

semantics