Which html5 tag should be used to filter search results
source link: https://www.codesd.com/item/which-html5-tag-should-be-used-to-filter-search-results.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Which html5 tag should be used to filter 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>
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>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK