使用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/>中的<li/>并不满意。首先，搜索结果命中本身并不是一篇文章，而只是一篇非常简短的摘要。其次，我甚至不确定你是否被允许在列表中放置一篇文章。

也许<details/>和<summary/>标记比<article/>更合适，但我不知道我是否可以在其中添加<footer/>？

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

Answer 1

1）我认为你应该坚持article元素，因为

  

[t]他article元素代表一个   自足的成分   文档，页面，应用程序或站点   这是打算的   可独立分发或   可重复使用的[source]

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

2）如果您想知道是否允许在article元素中包含li元素，只需将其提供给验证程序即可。如您所见，允许这样做。此外，正如Working Draft所说：

  

此元素可能的上下文   使用

     

预计会flow content。

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

  

仅包含主要导航块的部分适用于nav元素。特别是，页脚通常具有指向站点的各个页面的短链接列表，例如服务条款，主页和版权页面。仅footer元素就足以满足此类情况，没有nav元素。 [source]

4）请勿使用details和/或summary元素，因为这些元素是interactive elements的一部分，不适用于普通文档

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

  

ul元素代表一个列表   物品的顺序，物品的顺序   不重要 - 也就是说，在哪里   改变顺序不会   实质上改变了意义   文献。 [source]

由于搜索结果列表实际上是一个列表，我认为这是适当的元素;但是，在我看来，订单 非常重要（我希望最佳匹配结果位于列表顶部），我认为您应该使用有序列表（ol ）而不是：

  

ol元素代表一个列表   物品，物品的位置   故意订购，这样   改变顺序会改变   文件的含义。 [source]

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

编辑：糟糕，我刚刚意识到你已经使用了ol（由于我的fatique，我认为你使用的是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 的

ol属性

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

每个id

li

每个li应该获得id个属性，以便您可以链接到它。该值应为排名/位置。

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

删除header

如果它只包含标题（h1），则不需要。

将rel="external"添加到链接

指向每个搜索结果的链接是外部链接（指向不同的网站），因此应获得rel值external。

删除nav

article范围内的类别链接不是导航。所以删除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”中的单位应标有abbr：

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

删除pubdate属性

不再是规范了。

可以做的其他事情

如果链接结果的语言与搜索引擎不同，则
• 将hreflang属性赋予链接
• 将lang属性赋予链接描述和摘要（如果它使用的语言与搜索引擎不同）
• 摘要：如果搜索引擎本身未创建摘要但使用元描述或页面中的代码段，请使用blockquote（带cite属性）代替p
• 标题/链接说明：如果链接描述完全是链接网页的标题，请使用q（带cite属性）

Answer 3

我发现HTML5的良好资源是HTML5Doctor。检查文章存档以获取新标记的实际实现。不是一个完整的参考提醒你，但足够好，可以轻松进入它：）

如Footer element页所示，部分可以包含页脚：）

Answer 4

瞄准“完美”的HTML5模板是徒劳的，因为规范本身远非完美，新的“语义”元素的大多数规定用例最多都模糊不清。只要您的文档以逻辑方式构建，您就不会遇到任何搜索引擎问题（大多数新标签没有任何影响）。实际上，遵循HTML5规范的字母 - 例如，在每个新的分区元素中使用<h1>标签 - 可能会使您的网站更少可访问（例如，对于屏幕阅读器）。不要争取'完美'或接近，因为它不存在 - HTML5没有经过深思熟虑。只需集中精力保持标记的合理性和整洁性。