Today I learned

The HTML Search Element

Edit this Post Opens in new tab

The new generic search element is now available in Chrome 118, Edge 118, Safari 17.0 and Firefox 118 Opens in new tab. It still lacks support on some mobile browsers, but it's now available in all modern browsers!

Did you hear about the HTML search element? No problem, me neither until today! Let me quote the MDN documentation Opens in new tab:

The search HTML element is a container representing the parts of the document or application with form controls or other content related to performing a search or filtering operation. The search element semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof.

So, it's a correct semantic wrapper for search forms. When using it, there is no need to add a role="search" to a form anymore.

It's also important to note that the search element should not be used for presenting search results.

Here's a simple example:

<header>
  <h1>Search for recipes</h1>
  <search>
    <form
      action="/search"
      method="get"
    >
      <label for="recipes">Search for recipes</label>
      <input
        type="search"
        id="recipes"
        name="recipes"
      />
      <button type="submit">Search</button>
    </form>
  </search>
</header>

It's so great to see that the web is evolving and that we get new elements like this is to improve the semantics and accessibility of our websites and applications.


I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me via Email Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

☕️ Buy me a coffee ☕️

I wish you a wonderful day! Marco