使用HTML5语义标记搜索结果列表 [英] Marking up a search result list with HTML5 semantics

问题描述

制作搜索结果列表（如Google）不是很难，如果你只是需要一些有用的东西。但是，现在我想用完美的方式来实现它，并利用HTML5语义的好处。我们的目标是定义一种事实上的方式来标记搜索结果列表，这可能会被任何未来的搜索引擎使用。

对于每一次点击，我都想 p>

• 通过增加数量来订购它们


• 显示可点击的标题


• 显示简短的摘要


• 显示额外的数据，例如类别，发布日期和文件大小
  

我的第一个想法是这样的：

 < ol> 
< li> 
<文章> 
< header> 
< h1> 
< a href =网址至页面html> 
页面标题
< / a> 
< / h1> 
< / header> 
< p>页面的简短摘要< / p> 
< footer> 
< dl> 
< dt>类别< / dt> 
< dd> 
< nav> 
< ul> 
< li>< a href =first-category.html>第一类< / a>< / li> 
< li>< a href =second-category.html>第二类< / a>< / li> 
< / ul> 
< / nav> 
< / dd> 
< dt>文件大小< / dt> 
 dd> 2 kB< / dd> 
< dt>已发布< / dt> 
< dd> 
< time datetime =2010-07-15T13：15：05-02：00pubdate>今日< / time> 
< / dd> 
< / dl> 
< / footer> 
< / article> 
< / li> 
< li> 
 ... 
< / li> 
 ... 
< / ol> 
  

我对< article /> < code>< li /> 中。首先，搜索结果本身不是一篇文章，而只是一个简短的总结。其次，我甚至不确定你是否可以在列表中添加文章。

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

欢迎提出意见！我真的希望每一个细节都是完美的。

解决方案

1）我认为你应该坚持文章元素

[t] 文章元素表示
文档，页面，应用程序或站点
中的
自足组合，并且打算为
可独立分发或
可重复使用 [source ]

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

2）如果您想知道是否允许包含 code>元素中的code>元素，只需将它提供给验证器即可。正如你所看到的，它可以这么做。此外，正如工作草案说：



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

其中。

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

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

4）不要使用详情和/或摘要元素，因为这些元素被用作互动元素，并不适用于普通文档。

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

ul 元素表示
项目的列表，其中项目的顺序是
不重要 - 也就是说，
更改订单不会
实质性地改变
文件的含义。 [source]

由于搜索结果列表实际上是一个列表，我认为这是适当的元素;然而，在我看来，命令很重要（我期望最好的匹配结果在列表的顶部），我认为你应该使用一个有序列表（ ol ）改为：




ol 元素表示
项目的列表，其中项目是有意订购的
，这样
更改订单将改变文档的
含义。 [source]

使用CSS可以简单地隐藏数字。编辑：哎呀，我刚刚意识到你已经使用 ol （由于我的fatique，我以为你使用了 ul ）。我会按原样离开我的'更新';毕竟，这可能对某人有用。

Making a search result list (like in Google) is not very hard, if you just need something that works. Now, however, I want to do it with perfection, using the benefits of HTML5 semantics. The goal is to define the defacto way of marking up a search result list that potentially could be used by any future search engine.

For each hit, I want to

• order them by increasing number
• display a clickable title
• show a short summary
• display additional data like categories, publishing date and file size

My first idea is something like this:

<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>

I am not really happy about the <article/> within the <li/>. First, the search result hit is not an article by itself, but just a very short summary of one. Second, I am not even sure you are allowed to put an article within a list.

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.

解决方案

1) I think you should stick with the article element, as

[t]he article element represents a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable [source]

You merely have a list of separate documents, so I think this is fully appropriate. The same is true for the front page of a blog, containing several posts with titles and outlines, each in a separate article element. Besides, if you intend to quote a few sentences of the articles (instead of providing summaries), you could even use blockquote elements, like in the example of a forum post showing the original posts a user is replying to.

2) If you're wondering if it's allowed to include article elements inside a li element, just feed it to the validator. As you can see, it is permitted to do so. Moreover, as the Working Draft says:

Contexts in which this element may be used:

Where flow content is expected.

3) I wouldn't use nav elements for those categories, as those links are not part of the main navigation of the page:

only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element. [source]

4) Do not use the details and/or summary elements, as those are used as part of interactive elements and are not intended for plain documents.

UPDATE: Regarding if it's a good idea to use an (un)ordered list to present search results:

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document. [source]

As a list of search results actually is a list, I think this is the appropriate element to use; however, as it seems to me that the order is important (I expect the best matching result to be on top of the list), I think that you should use an ordered list (ol) instead:

The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document. [source]

Using CSS you can simply hide the numbers.

EDIT: Whoops, I just realized you already use an ol (due to my fatique, I thought you used an ul). I'll leave my ‘update’ as is; after all, it might be useful to someone.

这篇关于使用HTML5语义标记搜索结果列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！