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

Maybe the <details/> and <summary/> tags are more suitable than <article/>, but I don't know if I can add a <footer/> inside that?

All suggestions and opinions are welcome! I really want every single detail to be perfect.

Answer 1

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

[T]他article元素表示一个文档,页面,应用程序或网站的自包含组合物和其意图是独立地分发或可重复使用[源]

你只有一份单独的文件清单,所以我认为这是完全合适的.博客的首页也是如此,其中包含几个带有标题和轮廓的帖子,每个帖子都在一个单独的article元素中.此外,如果您打算引用文章的几个句子(而不是提供摘要),您甚至可以使用blockquote元素,例如在论坛帖子的示例中显示用户正在回复的原始帖子.

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

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

在哪里有流量内容.

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

只有由主要导航块组成的部分才适合该nav元素.特别是,页脚通常具有指向站点的各个页面的短链接列表,例如服务条款,主页和版权页面.footer对于这种情况,单独的元素就足够了,没有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 属性 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属性)