语义标记 - 页 header 或文章 header 中的 H1？

Question

我正在为我的博客创建一个 single-post 模板。每页有多个帖子，很简单：

<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> 个元素的结构保持一致，无论它们是列表的一部分还是 stand-alone。标题总是在 <article> 标签内，根据上下文在 <h1> 和 <h2> 之间变化。

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

推而广之，这同样适用于文章的其余部分 header 元数据。

这个决定的一部分可能归结为个人喜好，但也许有一些建议（例如，文章标题和元数据需要在文章标签内等）。 The spec says that the <article> element should be a "self-contained" piece of content. It then proceeds to show an example similar to my 1st option. Is that, then, the preferred approach? This question on Whosebug 也问了一些非常相似的问题，但不幸的是没有直接的答案。

Answer 1

规范将 <article> 定义为：

...a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry.

为了成为 "self-contained"，文章的标题需要在 <article> 元素内。否则，各种技术（和用户）可能会将 <article> 中的第一个标题错误地解释为文章的标题。

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

语义标记 - 页 header 或文章 header 中的 H1？

Semantic markup - H1 in page header or article header?

html

article

semantic-markup