Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What html5 tag should be used for filtering search results

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>
like image 266
hernan-scribe Avatar asked Jun 21 '13 17:06

hernan-scribe


People also ask

What is filter tag in HTML?

<filter> The <filter> SVG element defines a custom filter effect by grouping atomic filter primitives. It is never rendered itself, but must be used by the filter attribute on SVG elements, or the filter CSS property for SVG/HTML elements.


2 Answers

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>
like image 92
unor Avatar answered Nov 05 '22 18:11

unor


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.
like image 35
e-motiv Avatar answered Nov 05 '22 18:11

e-motiv