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>
<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.
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>
What about:
<nav role="search">
...
</nav>
I know it's not perfect, since..
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). If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With