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

Question

如果您只需要一些有用的东西，那么制作搜索结果列表（就像在 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/>。首先，搜索结果本身并不是一篇文章，而只是一篇非常简短的摘要。其次，我什至不确定您是否可以将文章放入列表中。

也许

和

标签比

更合适，但我不知道是否可以在其中添加

？

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

Answer 1

1) 我认为你应该坚持使用 article 元素，因为

[t]他的article元素代表一个
独立的组合物
文档、页面、应用程序或站点
其目的是
可独立分发或
可重复使用[来源]

您只有一个单独文件的列表，所以我认为这是完全合适的。博客的首页也是如此，包含多个带有标题和大纲的帖子，每个帖子都位于一个单独的 article 元素中。此外，如果您打算引用文章中的几句话（而不是提供摘要），您甚至可以使用 blockquote 元素，例如 论坛帖子示例，显示用户正在回复的原始帖子。

2) 如果您想知道是否允许在 li 元素中包含 article 元素，只需将其提供给验证器即可。正如您所看到的，这样做是被允许的。此外，正如工作草案< /a> 说：

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

其中流内容< /a> 是预期的。

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

只有由主要导航块组成的部分才适合nav 元素。特别是，页脚通常具有指向网站各个页面的简短链接列表，例如服务条款、主页和版权页面。 页脚 元素就足够了，不需要 nav 元素。 [来源]




4) 不要使用 details 和/或 summary 元素，因为它们用作 交互式元素，不适用于普通文档。

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

ul 元素表示一个列表
项目，其中项目的顺序是
不重要——也就是说，在哪里
改变顺序不会
实质上改变了
文档。 [来源]

由于搜索结果列表实际上是一个列表，我认为这是合适的元素；但是，在我看来，顺序很很重要（我希望最佳匹配结果位于列表的顶部），我认为您应该使用有序列表（ol< /代码>) 改为：

ol 元素表示一个列表
项目，项目所在的位置
故意命令，使得
改变顺序会改变
该文件的含义。 [来源]

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

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

Answer 2

我会以这种方式标记它（不使用任何 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 attribute for ol

如果搜索引擎使用分页，您应该给ol赋予start属性，以便每个li反映正确的排名位置。

每个 li 的 id

每个 li 都应该获得 id 属性，以便您可以链接到它。该值应该是等级/位置。

人们可能认为应该将 id 赋予 article，但我认为这是错误的：排名/顺序可能会随着时间而改变。您指的不是具体结果，而是结果位置。

删除 header

如果它仅包含标题 (h1)，则不需要。

将 rel="external" 添加到链接

每个搜索结果的链接都是一个外部链接（通向不同的网站），因此应该获取 rel 值外部。

删除nav

类别链接不是文章范围内的导航。因此删除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< /code> 文件大小

“2 kB”中的单位应该用 abbr 标记：

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

删除 pubdate 属性

它不再出现在规范中。

其他可以做的事情，

• 如果链接结果的语言与搜索引擎的语言不同，则为链接提供 hreflang 属性，
• 为链接描述和摘要提供 lang 属性（如果它是）使用与搜索引擎摘要不同的语言
• ：如果搜索引擎不创建，请使用 blockquote（带有 cite 属性）而不是 p摘要本身，但使用元描述或页面中的片段。
• 标题/链接描述：如果链接描述正是链接网页的标题，则使用 q （带有 cite 属性）

Answer 3

追求“完美”的 HTML5 模板是徒劳的，因为规范本身远非完美，新“语义”元素的大多数规定用例充其量也很模糊。只要您的文档以逻辑方式构建，搜索引擎就不会有任何问题（大多数新标签不会产生丝毫影响）。事实上，严格遵循 HTML5 规范 - 例如，在每个新的分区元素中使用

标签 - 可能会降低您的网站的可访问性（对于屏幕阅读器、例如）。不要追求“完美”或接近，因为它不存在 - HTML5 对此还没有经过深思熟虑。只需集中精力保持标记的逻辑性和整洁性即可。

Answer 4

我发现 HTML5 的一个很好的资源是 HTML5Doctor。检查文章档案以了解新标签的实际实现。请注意，这不是一个完整的参考，但足以轻松入门:)

如 页脚所示元素页面，部分可以包含页脚:)