时间戳

首页 > 解决方案 > 语义标记 - 页面标题或文章标题中的 H1？

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

问题描述

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

<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>标签始终位于页面上的同一位置。

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

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

标签： htmlsemantic-markuparticle

解决方案

规范定义<article>为：

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

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

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

推荐阅读