应该使用什么html5标记来过滤搜索结果

Question

如果我有一个页面区域,其中包含用于过滤搜索结果的不同选项(带链接的无序列表,复选框,选择等).应该使用什么html5标签来包装过滤器？"section"标签,"nav"标签还是其他什么？

<div id="search-filters"> <!-- This should be a div, a nav, a section? -->
    <h3>Price</h3>
    <ul>
        <li>less than 100</li>
        <li>100 - 200</li>
        <li>more than 200</li>
    </ul>

    <h3>Brand</h3>
    <ul>
        <li>Brand A</li>
        <li>Brand B</li>
        <li>Brand C</li>
    </ul>

    ...
</div>
<section id="search_results">
    ...
</section>

Answer 1

你可以使用这个header元素:

该header元素代表一组介绍性或导航性辅助工具.

需要注意的是header需要是在切片元素(在你的情况下,section)搜索结果的:

<section id="search_results">

  <h1>Search results</h1>

  <header id="search-filters">
    <!-- your filters -->
  </header>

  <article>
    <!-- search result 1 -->
  </article>

  <article>
    <!-- search result 2 -->
  </article>

</section>

如果你愿意的话,你也可以把它包括h1在里面header.如果您需要一个样式挂钩用于过滤器,您可以使用包装器div.

如果您的过滤器相当复杂,例如,如果您提供了许多过滤器,可能包含子标题,则可以使用以下section内容中的元素header:

<section id="search_results">

  <h1>Search results</h1>

  <header id="search-filters">
    <section>
      <h2>Filter the results</h2>
      <!-- your filters -->
    </section>
  </header>

  <article>
    <!-- search result 1 -->
  </article>

  <article>
    <!-- search result 2 -->
  </article>

</section>