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元素：

该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。如果您随后需要过滤器的样式挂钩，则可以使用 wrapper 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>

Answer 2

What about:

<nav role="search">
...
</nav>

I know it's not perfect, since..

1. nav doesn't really state in the standard that it should be used, but it's clearly something that leads you to different pages (which is). There isn't anything better, though you could also use menu, since it can also be seen as a command (1,2).
2. And it's not really a "search" role, since you said it's filtering what is already searched, but I think it's the closest to it.

Answer 3

我会在 html 中使用这样的东西：

<form method="get">
    Search By Client Name: <input type="search" name="searchText" />
    <input type="submit" value="Search" />
</form>

在控制器中，是这样的：

// GET: /Clients/

MyContextDB db = new MyContextDB();

public ActionResult Index(string searchText = null)
{
    var model =
    db.ClientProfiles
        .OrderBy(r => r.ClientName)
        .Where(r => searchText == null || r.ClientName.StartsWith(searchText))
        .Take(2)
        .Select(r => new ClientListViewModel {
            ClientId = r.ClientId,
            ClientName = r.ClientName,
            ....
        });

    return View(model);
}