Today I learned
The HTML Search Element
The new generic
search element is now available in
Chrome 118, Edge 118, Safari 17.0 and Firefox 118 ↗.
It still lacks support on some mobile browsers, but it's now available in all
Did you hear about the HTML search element? No problem, me neither until today! Let me quote the MDN documentation ↗:
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.
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