The HTML specification introduced the search element in 2023 as a dedicated container for search interfaces.
<search>
Baseline 2023 newly available
Supported in Chrome: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Since October 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The <search> element acts as a semantic wrapper for search forms and filtering UI components. It provides better accessibility than generic <div> elements and clarifies the purpose of search-related content to both browsers and assistive technologies.
Before its introduction, developers relied on generic div elements with ARIA roles to indicate search regions - a workable but less than ideal solution. The search element changes this by providing native semantic meaning for search and filtering interfaces.
<search> HTML Element
<search> <!-- NEW --> <form> <input type="search" placeholder="Search..."> <button type="submit">Search</button> </form></search>The type="search" input provides platform-specific features like clear buttons on some browsers.
The explicit label helps all users understand what they’re searching for, while the ARIA label provides additional context for screen readers.
<search> <h2>Filter Products</h2> <div class="filter-group"> <h3>Price Range</h3> <input type="range" min="0" max="1000" value="500"> </div> <div class="filter-group"> <h3>Categories</h3> <input type="checkbox" id="electronics" name="category"> <label for="electronics">Electronics</label> <input type="checkbox" id="clothing" name="category"> <label for="clothing">Clothing</label> </div></search>When to Use <search>
The search element might seem straightforward, but knowing when to use it improves its effectiveness:
<!-- Good: Global site search --><search> <form> <input type="search" placeholder="Search entire site"> </form></search>
<!-- Good: Product filtering --><search> <form> <fieldset> <legend>Filter by price</legend> <input type="range"> </fieldset> </form></search>
<!-- Not ideal: Simple text input --><input type="text" placeholder="Enter your name">The search element isn’t meant for every input field. It’s specifically for search and filtering interfaces where users can look up or narrow down content.
The <search> element represents a dedicated section for search functionality - but with an important caveat. While it’s perfect for search inputs and instant results like autocomplete, it shouldn’t be used for full search results pages.
<!-- Good: Search input with quick suggestions --><search> <form> <input type="search"> <ul class="suggestions"> <li><a href="/doc1">Quick result 1</a></li> <li><a href="/doc2">Quick result 2</a></li> </ul> </form></search>
<!-- Not appropriate: Full search results page --><search> <!-- Don't do this --> <h1>Search Results for "query"</h1> <div class="results"> <!-- Full page of results --> </div></search>Full search results belong in the main content area of your page, typically within <main> or <article> elements. The <search> element is for the search interface itself - inputs, filters, and immediate feedback like autocomplete suggestions.
