Question

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

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

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

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

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

有什么想法吗？

Answer 1

我会用：

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

<blockquote>最适合：

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

引用自己并不奇怪。元素的定义并没有说你必须引用其他人。您引用的文档位于另一个URL下。

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

我对<article>的石蕊测试是它在RSS / Atom Feed中是否有用，你可以找到只有文章摘录的Feed。

<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>

这里的文章由您可能期望的内容组成：标题，内容和一些元。因此，我认为这部分是非常直截了当的然而，它也链接到一篇文章，这就是为什么内容包含在blockquote中。它引用了它链接到的文章的一部分。摘录是文章的一部分。恰好是刚开始的一件作品。

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

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

新的HTML5大纲算法允许页面中有多个<h1>。关于开发人员是否会受到谷歌的惩罚，我们得到了很多疑问，根据神话，谷歌不允许这样做
  我说“神话”是因为谷歌总是在页面上允许多个<h1>，只要它是有机的而不是试图游戏系统。

Answer 3

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

旁边的元素代表一个部分由内容组成的页面与切线相关的在旁边元素周围的内容，和这可以被认为是分开的从那个内容。这样的部分是通常表示为侧边栏印刷排版。

在这种情况下，您的相关帖子与页面内容相切。我认为这正是旁边的内容类型。

Answer 4

绝对不能放弃，因为摘录与页面上的其他内容无关。这是我想的文章。

<article><summary>Excerpt here</summary></article>怎么样？

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

4 个答案: