search.md

🔍 <search>: The generic search element

Source: MDN Web Docs
Maintainer: Mozilla Contributors
Last Reviewed: 2024

✅

Baseline 2023 - Newly available

Since October 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Compatibility verified via MDN/CanIUse as of 2025.

🌐 Supported as of:

✅ Browser	🆕 New/Current Version	📆 Release Date	🖥️ Platform(s)	🧪 Rendering Engine	🛠️ Notes
Chrome	33/123	Feb 2014	Windows, macOS, Linux	Blink	Supported as part of Chromium core update
Edge	79/123	Jan 2020	Windows, macOS	Blink	Switched to Chromium/Blink base
Firefox	4/124	Mar 2011	Windows, macOS, Linux	Gecko	Early support with minor rendering quirks
Safari	7/17.4	Oct 2013	macOS, iOS	WebKit	Fully supported in WebKit-based browsers
Opera	20/109	Mar 2014	Windows, macOS, Linux	Blink	Support aligned with Chromium
Samsung Internet	2.0/24	Nov 2015	Android	Blink	Uses Chromium base; full support

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

🔧 Attributes

This element only includes the global attributes.

📝 Usage notes

The <search> element is not for presenting search results. Rather, search or filtered results should be presented as part of the main content of that web page. That said, suggestions and links that are part of "quick search" functionality within the search or filtering functionality are appropriately nested within the contents of the <search> element as they are search features.

♿ Accessibility

The <search> element defines a search landmark. This removes the need for adding role="search" to a <form> element.

💡 Examples

🔍 Header search form

This example demonstrates the use of <search> as the container for a search within a website header to perform a site-wide search. The <search> is a semantic container for the <form> that submits the user-entered search query to a server.

<header>
  <h1>Movie website</h1>
  <search>
    <form action="./search/">
      <label for="movie">Find a Movie</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">Search</button>
    </form>
  </search>
</header>

💻 Web app search

This example demonstrates potential DOM content when dynamically including JavaScript search functionality in a web application. When search functionality is implemented entirely with JavaScript, if no form is submitted, neither a <form> element nor a submit <button> is required. For semantics, the <search> element is included to contain the search and filtering capabilities.

<search>
  <label>
    Find and filter your query
    <input type="search" id="query" />
  </label>
  <label>
    <input type="checkbox" id="exact-only" />
    Exact matches only
  </label>

  <section>
    <h3>Results:</h3>
    <ul id="results">
      <!-- search result content -->
    </ul>
    <output id="no-results">
      <!-- no results content -->
    </output>
  </section>
</search>

📌 Note: Remember that some users don't have JavaScript, and none of your users have JavaScript running until the JavaScript is successfully downloaded, parsed, and executed. Ensure your users can access the content of your site with JavaScript disabled.

🧭 Multiple searches

This example demonstrates a page with two search features. The first is a global site search located on the header. The second is a search and filter based on the page context, in our example a car search.

<header>
  <h1>Car website</h1>
  <search>
    <form action="/search/">
      <label for="site-search">Search the site:</label>
      <input type="search" id="site-search" name="q" />
      <button type="submit">Search</button>
    </form>
  </search>
</header>

<main>
  <h2>Find your next car</h2>
  <search>
    <form action="/cars/">
      <label for="car-search">Search cars:</label>
      <input type="search" id="car-search" name="car" />
      <button type="submit">Search</button>
    </form>
  </search>
</main>

🧪 Technical summary

• Content categories: Flow content, sectioning content, palpable content
• Permitted content: Flow content
• Tag omission: Neither tag is omissible
• Permitted parents: Any element that accepts flow content
• Implicit ARIA role: search
• Permitted ARIA roles: No role permitted
• DOM interface: HTMLElement

📘 Specifications

Specification	Status	Comment
HTML Living Standard	Living Standard	Initial definition

🌐 Browser compatibility

The <search> element is supported in modern browsers. However, as with any new feature, it's essential to test across different browsers to ensure consistent behavior.

🔗 See also

• 📝 <form>
• 🔍 <input type="search">
• ♿ ARIA: search role