Question

可能重复：
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

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

Answer 1

如果您的搜索结果排名（可能是相关性），则应使用ol元素。每个结果都是自己的li。如果每个结果都包含多个链接（例如，包含文字片段，作者姓名，发布日期等），请同时使用article。

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

我给了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>

Answer 2

没有。文章和章节没有被引入以进一步滥用标准，但在标签和内容之间有明确的联系。只有在您确实描述了部分和文章实例时才应该使用它们。

搜索结果必须是列表，应在<li>标记内使用。但是，无论你是否使用有序的，都无关紧要。

搜索结果列表的HTML5标记

2 个答案: