用HTML5语义标记搜索结果列表

1) 我认为你应该坚持 article 元素,如

[t] 他 文章 元素表示 自成体系的 文档、页面、应用程序或站点 [source]

你只有一份单独文件的清单,所以我认为这是完全合适的。博客的首页也是如此,它包含了几个带有标题和提纲的帖子,每个帖子都在一个单独的页面中 元素。此外,如果你想引用文章中的几句话(而不是提供摘要),你甚至可以使用 blockquote 元素,比如 the example of a forum post 显示用户正在回复的原始帖子。

2) 内部元素 li Working Draft 说:

此元素可能存在的上下文 使用时间:

在哪里? flow content 是预期的。

3) nav 这些类别的元素,因为这些链接不是页面主导航的一部分:

nav 元素。特别是,页脚通常会有一个指向网站各个页面的链接短列表,例如服务条款、主页和版权页。这个 footer 导航 元素。 [source]

4) 不要使用 details 和/或 summary 元素,作为 interactive elements 也不适用于普通文档。

更新:

这个 ul 元素表示 项目,其中项目的顺序为 改变顺序是不可能的 实质上改变 文件。 [source]

作为一个搜索结果列表实际上是一个列表,我认为这是适当的元素使用;然而,在我看来 ol )取而代之的是:

这个 ol公司 项目,项目所在的位置 故意命令,使 改变顺序会改变结果 [source]

使用CSS你可以简单地隐藏数字。

编辑: 哎哟,我刚意识到你已经用了 (由于我的疲劳,我以为你用了 保险商实验室

我会这样标记它(不使用任何RDFa/微数据词汇表或微格式;因此,仅使用普通HTML5规范提供的内容):

<ol start="1">

  <li id="1">
    <article>
     <h1><a href="url-to-the-page.html" rel="external">The Title of the Page</a></h1>
     <p>A short summary of the page</p>
     <footer>
       <dl>
         <dt>Categories</dt>
         <dd><a href="first-category.html">First category</a></dd>
         <dd><a href="second-category.html">Second category</a></dd>
         <dt>File size</dt>
         <dd>2 <abbr title="kilobyte">kB</code></dd>
         <dt>Published</dt>
         <dd><time datetime="2010-07-15T13:15:05-02:00">Today</time></dd>
        </dl>
      </footer>
    </article>
  </li>

  <li id="2">
    <article>
     …
    </article>
  </li>

</ol>

start 的属性 ol

如果搜索引擎使用分页,您应该给出 开始 属性为 ol公司 ,使每个 li 反映正确的排名位置。

id 对于每个

每个 锂 应该得到 心房,这样你就可以链接到它。该值应为职级/职位。

有人会认为 应该交给 article 相反,我认为这是错误的:等级/顺序可能会随着时间的推移而改变。你指的不是一个特定的结果,而是一个结果位置。

拆下 header

h1 ).

添加 rel="external" 到链接

链接(指向不同的网站),所以它应该得到 rel 价值 external .

删除 nav

类别链接不可用 在合同范围内 文章 . 因此,请移除 导航 .

dd

您使用了:

<dt>Categories</dt>
<dd>
 <ul>
  <li><a href="first-category.html">First category</a></li>
  <li><a href="second-category.html">Second category</a></li>
 </ul>
</dd>

相反,您应该在每个类别中列出自己的类别 dd公司 ul :

<dt>Categories</dt>
<dd><a href="first-category.html">First category</a></dd>
<dd><a href="second-category.html">Second category</a></dd>

abbr 对于文件大小

“2 kB”中的单位应标记为 缩写 :

2 <abbr title="kilobyte">kB</code>

删除 pubdate

其他可以做的事情

• hreflang 如果链接结果的语言与搜索引擎的语言不同,则为链接的属性
• lang 如果链接描述和摘要的语言与搜索引擎的语言不同,则为该链接描述和摘要的属性
• 摘要:使用 blockquote cite p ,如果搜索引擎本身不创建摘要,而是使用页面中的元描述或片段。
• q (与 属性)如果链接描述与链接网页的标题完全相同

追求一个“完美”的HTML5模板是徒劳的,因为规范本身还远远不够完美,新的“语义”元素的大多数规定用例充其量也很模糊。只要文档的结构符合逻辑,搜索引擎就不会有任何问题(大多数新标签没有丝毫影响)。实际上,严格遵循HTML5规范-例如,使用 <h1> 每个新分区元素中的标记-可能会使您的站点 较少的 可访问(例如屏幕阅读器)。不要追求“完美”或接近完美,因为它根本不存在——HTML5的思想还不够成熟。只需集中精力保持标记的逻辑性和条理性。

我发现HTML5的一个好资源是 HTML5Doctor . 查看文章存档,了解新标签的实际实现。不是一个完整的参考,但很好地进入它:)

如图所示 Footer element 页,节可以包含页脚:)