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.