HTML <search> Element
The HTML <search> element represents a section of a webpage that contains controls for searching or filtering content.
Syntax
<search>
<form action="/search.html" method="get">
<label for="site-search">Search:</label>
<input type="search" id="site-search" name="q">
<button type="submit">Search</button>
</form>
</search>The <search> element requires both an opening and closing tag. Search or filtering controls, such as a form containing a search field and button, are placed inside the element.
Attributes
The <search> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses the <search> element to identify a form that allows users to enter a search term.
Usage Notes
Use the <search> element to group controls that allow users to search or filter information. It can represent a site-wide search, a search limited to part of a website, or controls used to filter a collection of content.
The <search> element does not perform a search by itself. It provides semantic structure around the controls responsible for searching or filtering, such as a <form>, search input, and submit button.
The element can contain more than a simple text search. For example, it can group controls that filter products by category, narrow a list of results, or search within a particular section of a webpage.
The <search> element is different from <input type="search">. The <search> element identifies an entire search or filtering section, while <input type="search"> creates an individual input control intended for entering search terms.
Accessibility
The <search> element provides a semantic search landmark that can help assistive technology users identify and navigate to search functionality on a webpage.
Search form controls should still have clear labels. Associate a <label> element with each input when appropriate, and use descriptive button text so users understand how to perform the search.
If a page contains multiple search areas, provide enough context to distinguish their purposes, such as site search, product search, or filtering controls.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <search> Element .
Related Elements
The <search> element is closely related to the <form> element for submitting user input, the <input> element for entering search terms, the <label> element for identifying form controls, and the <button> element for submitting a search.