<search> Search region
Wraps a search or filter form and creates a search landmark.
<search> groups the controls for searching or filtering content. Usually that is a <form> with a search input and a button. Assistive technology exposes it as a search landmark, so users can find it fast.
The element is new. Current browsers support it, and older ones treat it like a div. It wraps the search controls, and the results go somewhere else.
The search element in the WHATWG standard (opens in a new tab) arrived in 2023 to give search forms their own landmark. In the Landmarks lesson you see it next to nav and main.
Syntax
<search>
<form action="/search">
<input type="search" name="q">
</form>
</search>When to use it
Wrap search around the controls people use to find or narrow down content: the site search box in the header, the filter panel beside a product list, a "find a store" form with a postal code field, a search-within-docs box in a sidebar. Each one becomes a search landmark that screen reader users can reach directly.
Before this element existed, the same result took <form role="search">, which still works and means the same thing. In new code search reads better, and it can also wrap filters that update results by script and so have no form at all. A text field that is not about finding content, such as a promo code box, is not a search.
Two search areas on one page, say a site search in the header and a filter panel beside the results, give you two search landmarks. Without labels, both are announced as plain "search". An aria-label on each, such as "Site" and "Filter products", lets users tell them apart. The forms and inputs lesson covers the fields inside.
Live example
Edit the code and watch the preview.
<search>
<form action="/search">
<label for="q">Search the course</label>
<input type="search" id="q" name="q">
<button>Search</button>
</form>
</search>More examples
Product filters
Search can wrap more than a text box. This filter panel narrows a product list by category and stock, so it is wrapped in search with its own aria-label. Submit the form in the preview to see the filter values that would be sent.
<search aria-label="Filter products">
<form action="/shop">
<label for="cat">Category</label>
<select id="cat" name="cat">
<option>All</option>
<option>Bread</option>
<option>Cakes</option>
</select>
<label><input type="checkbox" name="stock" value="yes"> In stock only</label>
<button>Apply filters</button>
</form>
</search>Site search in a header
The site-wide search sits in the page header next to the logo and is labelled "Site". The input has its own label too, because the landmark name does not name the field. The type="search" input gives a clear button in many browsers.
<header>
<img src="logo.svg" alt="HTML Schools" width="200" height="60">
<search aria-label="Site">
<form action="/search">
<label for="site-q">Search lessons</label>
<input type="search" id="site-q" name="q" placeholder="e.g. tables">
<button>Search</button>
</form>
</search>
</header>Tip: Wrap the form, leave the results out.
Browser support
The search element was added to the HTML standard in 2023 and has been supported in current Chrome, Edge, Firefox and Safari since late 2023. Older browsers treat it as an unknown element that still shows its contents. Check the search element support table (opens in a new tab); if you must support very old browsers, add role="search" as a fallback.
Accessibility
The landmark does not name the field. The search input still needs a visible label, or an aria-label at the very least. The W3C ARIA landmarks guidance (opens in a new tab) describes the search landmark role.
Common mistakes
Wrong
<search>
<input type="search">
<button>Go</button>
</search>Right
<search>
<form action="/search">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button>Go</button>
</form>
</search>The input still needs its label and name, and a form to submit.
Frequently asked questions
What is the search element in HTML?
A container for search controls, added to the HTML Living Standard in 2023. <search> wraps things like a site search form or product filters, and assistive technology exposes it as a search landmark. Before it existed you had to write <form role="search"> to get that landmark. Browser support is tracked on Can I use (opens in a new tab).