What html5 tag should be used for filtering search results

Question

If I have an area of a page with different options for filtering the search results (unordered lists with links, checkboxes, selects, etc.). What html5 tag should be used to wrap that filters? A "section" tag, a "nav" tag or something else?

<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

You could use the header element:

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

Note that the header needs to be in the sectioning element (in your case, section) of the search results:

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

You could include the h1 in the header too, if you like. If you then need a styling hook for the filters, you could use a wrapper div.

If your filters are rather complex, e.g. if you offer many filters, probably with subheadings, you could use a section element inside of the 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

I would use something like this in the html:

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

And in the controller, something like this:

// 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);
}