html - 应该使用什么 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 element :

The header element represents a group of introductory or navigational aids.

请注意，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>

如果愿意，您也可以在 header 中包含 h1。如果您随后需要过滤器的样式 Hook ，则可以使用包装器 div。

如果您的过滤器相当复杂，例如如果您提供许多过滤器，可能带有副标题，您可以在 header 中使用 section 元素:

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