15

Which html5 tag should be used to filter search results

 2 years ago
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

advertisements

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>


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK