用于标记博客摘录的最佳 HTML5 标记是什么？

Question

博客的一种常见模式是拥有存档页面（例如按日期或类别），其中列出了相关的博客文章，以及摘录（段落或）和链接。但是，我无法确定哪个 HTML5 元素最适合用于单个帖子。

<article> 标签可能看起来很合适（如果您要显示整个内容，肯定会这样），但我不确定它是否适合摘录。 specification 说：

article 元素表示文档、页面、应用程序或站点中的自包含组合，原则上是可独立分发或可重复使用的，例如在联合中。

摘录真的是一个独立且可独立分发的内容吗？我不太确定。

其他选项可能是 <blockquote> 标签（但引用您自己的帖子会很奇怪），或者只是一个包含标题和段落的 <ol> 列表（按发布日期排序）。

有什么想法吗？

Answer 1

我会使用：

 <li>
    <blockquote cite="original URL">
    </blockquote>
 </li>

<blockquote> 最适合这个：

blockquote 元素表示从另一个来源引用的部分。

引用自己并不奇怪。元素的定义并不是说你必须引用别人。您确实引用了位于另一个 URL 下的文档。

我认为<article>（而不是<li>）可以接受，但没必要（文章的定义很宽松，it should have been called <infolump>;）

我对@9​​87654328@ 的试金石是它在 RSS/Atom 提要中是否有用，您可以找到仅包含文章摘录的提要。

---

<summary> 元素只是<details> 的一部分，用途不同。

<aside> 描述页面中内容的作用。当摘录是存档页面的主要部分时，它并不是真正的切线内容。 OTOH，如果它是帖子页面上的“另请参阅”部分，那么 <aside> 将是完美的。

Answer 2

我认为最符合语义的方式是同时使用<article> 和<blockquote>，并结合<h1>：

<article>
    <h1>Post title here</h1>
    <div class="meta">author, date, categories, tags, whatever</div>
    <blockquote>
        Excerpt
    </blockquote>
    <a href="/full/article">Read full Post</a>
</article>

此处的文章包含您可能期望的内容：标题、内容和一些元数据。所以我认为这部分非常简单。
然而，它也链接到一篇文章，这就是内容被包裹在块引用中的原因。它引用了它链接到的一篇文章。摘录是文章的一部分。刚好在开头的一段。

无论如何，这种方法是我从所有文档和规范中推断出来的。

是的，您可以在一个页面上使用多个<h1> 标签，只要它有意义。看看http://html5doctor.com/html5-seo-search-engine-optimisation/：

新的 HTML5 大纲算法允许一个页面中有多个 <h1>。我们收到很多关于开发人员是否会受到谷歌惩罚的问题，根据神话，谷歌不允许这样做。

我说“神话”是因为 Google 一直允许在一个页面上出现多个 <h1>，前提是它是有机的，而不是试图玩弄系统。

Answer 3

绝对不是旁白，因为摘录与页面上的其他内容无关。我认为它必须是文章。

<article><summary>Excerpt here</summary></article> 呢？

Answer 4

<aside> 似乎很合适。根据规范：

aside 元素代表一个部分 由内容组成的页面 与 旁边元素周围的内容，以及 可以被认为是分开的 从那个内容。这些部分是 通常表示为侧边栏 印刷字体。

在这种情况下，您的相关帖子与页面内容相关。我认为这正是旁白所要表达的内容类型。