Which html5 tag should be used to filter search results

Question

If I have a page area with various filtering options for search results (unordered lists with links, flags, highlights, etc.). Which html5 tag should be used to migrate these filters? The section tag, the 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 can use the header element:

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

Note that the header must 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 can include h1 in the header if you want. If you need a stylus for filters, you can use a wrapper div .

If your filters are pretty complicated, for example. if you offer many filters, possibly with subheadings, you can use the section element inside 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 this is not ideal since ..

• nav does not actually indicate in the standard that it should be used, but this is clearly what leads you to different pages (which is). There is nothing better, although you can also use menu , as it can also be seen as a command ( 1 , 2 ).
• And this is not really a "search" role, since you said that it filters what has already been searched, but I think that it is closest to her.

Answer 3

I would use something like this in 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); }