html - 搜索结果列表的 HTML5 标记

Question

可能重复：
使用 HTML5 语义标记搜索结果列表

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

我最初的方式是这样的：

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

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

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

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

Answer 1

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

ol描述结果是排名的，article描述每个结果代表一个独立的实体（可以在提要中联合）。

我给出了一个标记示例作为另一个问题的答案：

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

Answer 2

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

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