搜索结果列表的 HTML5 标记 [重复]答案

【问题标题】：HTML5 tags for a search result list [duplicate]搜索结果列表的 HTML5 标记 [重复]
【发布时间】：2012-10-23 20:00:55
【问题描述】：

可能重复：
Marking up a search result list with HTML5 semantics

我有一个从查询到数据库的项目列表。现在我想通过 HTML 向用户显示它们。

我最初的方式是这样的：

<ol>
  <li>
    search element 1
  </li>
  ...
</ol>

我想知道 HTML5 是否有更好的语义方式，例如：

<article>
  <section>
    search element 1
  </section>
  ...
</article

有没有人有更好的语义方式？

【问题讨论】：

user509375 您可以参考 StackOverflow 的另一个讨论中的解决方案建议...Marking up a search result list with HTML5 semantics

标签： html semantic-markup

【解决方案1】：

如果您的搜索结果排名（可能按相关性），您应该使用ol 元素。每个结果都是它自己的li。如果每个结果包含多个链接（例如，带有文本 sn-p、作者姓名、发布日期等），也使用 article。

ol 描述了对结果进行排名，article 描述了每个结果代表一个自包含的实体（可以在一个提要中联合）。

我给了markup example 作为另一个问题的答案：

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

【讨论】：

【解决方案2】：

没有。引入文章和章节并不是为了进一步滥用标准，而是为了在标签和内容之间建立明确的联系。仅当您确实在描述部分和文章实例时才应使用它们。

搜索结果必须是一个列表，并且应该在<li> 标记中使用。不过，是否使用已订购的并不重要。

【讨论】：