HTML & CSS Tip of the Week

The search element

Published on


Considering how long search has been a feature of the web, it’s pretty amazing that for a long time, we didn’t have a semantic element for it!

Now with baseline support though, we have the <search> element, which we can use to wrap a form we’d use for searching:

<search>
  <form method="get" action="/search">
    <input type="search" name="search" />
    <button>Search</button>
  </form>
</search>

It’s actually a landmark region for assistive technologies, so if you have a search feature on your site you should definitely use it, (or a role="search").

This post by Alvaro Montoro goes into more detail on using it, including an example of using it filtering instead of a tradtional search bar.

Just note that browser support is better now compared to when he authored that post, but it might still be a good idea to include the role as a fallback.