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

制作搜索结果列表(如Google)不是很难，如果您只需要有用的东西。然而，现在，我想用完美的方式，使用HTML5语义的好处。目标是定义标记可能被任何未来搜索引擎使用的搜索结果列表的违反方式。

对于每个命中，我想

>通过增加订单
>显示可点击的标题
>显示一个简短的总结
>显示类别，发布日期和文件大小等附加数据

我的第一个想法是这样的：

<ol>
  <li>
    <article>
      <header>
        <h1>
          <a href="url-to-the-page.html">
            The Title of the Page
          </a>
        </h1>
      </header>
      <p>A short summary of the page</p>
      <footer>
        <dl>
          <dt>Categories</dt>
          <dd>
            <nav>
               <ul>
                  <li><a href="first-category.html">First category</a></li>
                  <li><a href="second-category.html">Second category</a></li>
                </ul>
            </nav>
          </dd>
          <dt>File size</dt>
          <dd>2 kB</dd>
          <dt>Published</dt>
          <dd>
            <time datetime="2010-07-15T13:15:05-02:00" pubdate>Today</time>
          </dd>
        </dl>
      </footer>
    </article>
  </li>
  <li>
    ...
  </li>
  ...
</ol>

我不满意< article />在< li />内。首先，搜索结果命中本身不是一篇文章，而只是一个非常简短的摘要。第二，我甚至不确定你被允许把一个文章放在清单中。

也许< details />和< summary>标签比< article />更合适，但是我不知道是否可以添加< footer />里面呢

欢迎所有的意见和建议！我真的希望每一个细节都是完美的。

解决方法

1)我认为你应该坚持文章元素，as

[t]he article element represents a
self-contained composition in a
document,page,application,or site
and that is intended to be
independently distributable or
reusable 07000

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

2)如果您想知道是否允许在li元素中包含文章元素，只需将其提供给验证器即可。正如你所看到的，允许这样做。而且，正如Working Draft所说：

Contexts in which this element may be
used:

Where 07003 is expected.

3)我不会为这些类别使用导航元素，因为这些链接不是页面主导航的一部分：

only sections that consist of major navigation blocks are appropriate for the 07004 element. In particular,it is common for footers to have a short list of links to varIoUs pages of a site,such as the terms of service,the home page,and a copyright page. The 07005 element alone is sufficient for such cases,without a nav element. 07006

4)不要使用细节和/或概要元素，因为它们作为interactive elements的一部分使用，不适用于简单文档。

更新：关于如果使用(un)有序列表来呈现搜索结果是个好主意：

The ul element represents a list of
items,where the order of the items is
not important — that is,where
changing the order would not
materially change the meaning of the
document. 07008

作为搜索结果的列表实际上是一个列表，我认为这是适当的元素使用;然而，在我看来，顺序很重要(我希望最好的匹配结果在列表的顶部)，我认为你应该使用有序列表(ol)：

The ol element represents a list of
items,where the items have been
intentionally ordered,such that
changing the order would change the
meaning of the document. 07009

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

编辑：哎呀，我只是意识到你已经使用了一个(由于我的脾气，我以为你使用了一个ul)。我会离开我的’更新’原样;毕竟，这可能对某人有用。

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

解决方法

相关推荐