语义标记 - 页面标题或文章标题中的 H1？答案

【问题标题】：Semantic markup - H1 in page header or article header?语义标记 - 页面标题或文章标题中的 H1？
【发布时间】：2020-04-21 04:06:51
【问题描述】：

我正在为我的博客创建一个单篇文章模板。每页有多个帖子，这很简单：

<header class="page-header">
  <h1>Recipes</h1>
  ...
</header>
<main>
  <article>
    <header class="entry-header">
      <h2>Article 1</h2>
      ... other metadata ...
    </header>
    <p>Body</p>
  <article>
    <header class="entry-header">
      <h2>Article 2</h2>
      ... other metadata ...
    </header>
    <p>Body</p>
  </article>
</main>

但是对于单个帖子，我无法决定哪个更优雅：

<header class="page-header">
  ...
</header>
<main>
  <article>
    <header class="entry-header">
      <h1>The article title</h1>
      ... other metadata ...
    </header>
    <p>The article body</p>
  </article>
</main>

<header class="page-header">
  <h1>The article title</h1>
  ... other metadata? ...
</header>
<main>
  <article>
    <p>The article body</p>
  </article>
</main>

选项 1 使 <article> 元素的结构保持一致，无论它们是列表的一部分还是独立的。标题始终位于<article> 标记内，根据上下文在<h1> 和<h2> 之间变化。

选项2保持<header>标签的结构一致，<h1>标签始终在页面的同一位置。

通过扩展，这同样适用于文章标题元数据的其余部分。

此决定的一部分可能归结为个人喜好，但也许有一些建议（例如，文章标题和元数据需要在文章标签内等）。 The spec 表示 <article> 元素应该是“自包含”的内容。然后它继续显示一个类似于我的第一个选项的示例。那么，这是首选的方法吗？ This question on StackOverflow 也问了一些非常相似的问题，但不幸的是没有直接的答案。

【问题讨论】：

您可以在一个页面上拥有多个 h1，因此如果在文章顶部也有一个也有意义，那么就拥有一个，但是如果您担心 seo 而不是语义，那么也许您应该在webmasters.stackexchange.com/help/on-topic问这个问题
@Pete 我一直读到你应该每页只使用一个 h1，有没有改变？此外，此时我只关心优雅和语义，SEO 可以稍后出现。谢谢！
最好每页有 1 个<h1>。对于单个帖子，我会选择第一个选项，请记住，您将拥有很多文章的元数据，例如作者、日期等。
这是一种误解，认为你应该只有一个 h1，因为谷歌会在 seo 中标记你。如果一个页面有多个部分，每个部分都一样重要，那么这些部分的标题应该每个都具有相同的权重 - 如果是 h1，那就这样吧。没有任何内容表明页面中应该只有一个 h1 - 如果有，那么如果您在文档中有多个（它不会这样做），任何在线验证器都会失败

标签： html semantic-markup article

【解决方案1】：

规范将<article> 定义为：

...文档、页面、应用程序或站点中的自包含组合，旨在独立分发或可重复使用（例如，在联合中）。示例包括：论坛帖子、杂志或报纸文章或博客条目。

为了使其“独立”，文章的标题需要在<article> 元素内。否则，各种技术（和用户）可能会将<article> 中的第一个标题错误地解释为文章标题。

选择选项 1。始终将文章标题保留在 <article> 标记内。

【讨论】：