26

如果您只需要一些有用的东西，制作搜索结果列表（如在 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/>里面添加一个？

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

4

4 回答 4

28

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

[t]article元素表示文档、页面、应用程序或站点中的自包含组合，旨在独立分发或可重用[来源]

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

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

可以使用此元素的上下文：

预期流量内容的位置。

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

只有包含主要导航块的部分才适用于该nav元素。特别是，页脚通常有一个指向站点各个页面的链接的简短列表，例如服务条款、主页和版权页面。对于这种情况，单独的footer元素就足够了，没有nav元素。[来源]

4)不要使用detailsand/orsummary元素，因为它们被用作交互元素的一部分，并且不适用于普通文档。

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

该ul元素表示一个项目列表，其中项目的顺序并不重要——也就是说，更改顺序不会实质性地改变文档的含义。[来源]

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

该ol元素表示项目列表，其中项目已被有意排序，因此更改顺序将更改文档的含义。[来源]

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

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

于 2010-07-19T14:24:08.630 回答
6

我会以这种方式标记它（不使用任何 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"到链接

每个搜索结果的链接都是一个外部链接（指向不同的网站），所以它应该得到relvalue 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(with citeattribute) 而不是。p
  • 标题/链接描述：如果链接描述正是链接网页的标题，则使用q（带属性）cite
于 2012-08-15T13:40:47.067 回答
1

追求“完美”的 HTML5 模板是徒劳的，因为规范本身远非完美，新的“语义”元素的大多数规定用例充其量是模糊的。只要您的文档结构合理，搜索引擎就不会有任何问题（大多数新标签不会产生丝毫影响）。事实上，严格遵守 HTML5 规范——例如，<h1>在每个新的分节元素中使用标签——可能会使您的网站更难访问（例如，屏幕阅读器）。不要追求“完美”或接近，因为它不存在——HTML5 没有为此考虑得足够好。只需专注于保持您的标记合乎逻辑且整洁。

于 2013-07-27T05:05:14.233 回答
0

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

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

于 2010-07-19T11:31:11.037 回答