带有文章、部分和标题的 HTML5 布局

【问题标题】：HTML5 layout with articles, sections and headings带有文章、部分和标题的 HTML5 布局
【发布时间】：2016-06-16 18:31:26
【问题描述】：

我真的不明白在 HTML5 中使用标题的正确方法是什么。例如，这段代码是否正确：

<body>
<h1>Body Heading H1</h1>
<article>
<h2>Article Heading H2</h2>
  <section>
  <h2>First Section Heading H2</h2>
  </section>
  <section>
  <h2>Second Section Heading H2</h2>
  </section>
</article>
</body>

在这种情况下，我可以用 H1 替换 H2 标签，文章和部分，还是只替换文章？

附：我也希望它尽可能地进行 SEO 优化

【问题讨论】：

技术上有效，但不是最佳实践（其他<h2>s 可能比<h3>s 更好）。不要相信任何告诉你全力以赴的人-<h1>，因为这从未得到支持：html5doctor.com/computer-says-no-to-html5-document-outline
谢谢你，阿德里安

标签： html seo semantic-markup html-heading

【解决方案1】：

HTML5 允许作者在任何地方使用h1（如果您像您一样明确使用分段内容元素，这是可能的），但encourages authors 可以使用“分段嵌套级别的适当等级的标题”。见pro/contra。

根据该建议，article 中的子部分的标题应为 h3 而不是 h2：

<body>

  <h1>Body Heading</h1>

  <article>

    <h2>Article Heading</h2>

    <section>
      <h3>First Section Heading</h3>
    </section>

    <section>
      <h3>Second Section Heading</h3>
    </section>

  </article>

</body>

您的结构似乎是合适的。每个部分都有一个标题（h1 表示 body 部分根，h2 表示 article 部分，h3 表示两个 section 部分），这是完美的。

【讨论】：