
The new generic `search` element is now available in
[Chrome 118, Edge 118, Safari 17.0 and Firefox 118](https://caniuse.com/mdn-html_elements_search).
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search):

> 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:

```html
<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.


The HTML Search Element is a new semantic element that can be used as a container for the parts of the document related to performing a search or filtering operation.

Today I learned

The HTML Search Element