使用 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/> and <summary/>标签比<article/>，但我不知道是否可以添加一个<footer/>里面那个？

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

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

[t]he article元素代表一个 独立的组合物 文档、页面、应用程序或站点 其目的是 可独立分发或 可重复使用的[source] http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element

您只有一个单独文件的列表，所以我认为这是完全合适的。博客的首页也是如此，包含多篇带有标题和大纲的帖子，每一篇都在单独的页面中article元素。此外，如果您打算引用文章的几句话（而不是提供摘要），您甚至可以使用blockquote元素，例如论坛帖子的示例 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-blockquote-element显示用户正在回复的原始帖子。

2)如果您想知道是否允许包含articlea 内的元素li元素，只需将其提供给验证器即可。正如您所看到的，这样做是被允许的。此外，作为工作草案 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element says:

该元素可能存在的上下文 用过的：

Where 流动内容 http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#flow-content是期待。

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

只有由主要导航块组成的部分才适合nav http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element元素。特别是，页脚通常具有指向网站各个页面的简短链接列表，例如服务条款、主页和版权页面。这footer http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element对于这种情况，单独的元素就足够了，无需nav元素。[source] http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element

4)不要使用details and/or summary元素，因为它们被用作互动元素 http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element并且不适用于普通文档。

UPDATE:关于使用（无序列表）来呈现搜索结果是否是个好主意：

The ul元素代表一个列表 项目，其中项目的顺序是 不重要——也就是说，在哪里 改变顺序不会 实质上改变了 文档。[source] http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ul-element

由于搜索结果列表实际上是一个列表，我认为这是使用的合适元素；然而，在我看来，该命令is重要（我希望最佳匹配结果位于列表顶部），我认为您应该使用有序列表（ol） 反而：

The ol元素代表一个列表 项目，项目所在的位置 故意命令，使得 改变顺序会改变 该文件的含义。[source] http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ol-element

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

EDIT:哎呀，我刚刚意识到你已经使用了ol（由于我的疲劳，我以为你用了ul）。我将保留我的“更新”不变；毕竟，它可能对某人有用。