HTML Tags
HTML <search> Tag
Learn how the HTML <search> tag semantically identifies controls and content used for searching or filtering.
The
<search>tag represents a part of a document or application used for searching or filtering.
It is a semantic container for form controls or other search-related content and creates a search landmark for assistive technologies.
Syntax
html
<search>
<form action="/search">
<label for="query">Search:</label>
<input type="search" id="query" name="q">
<button type="submit">Search</button>
</form>
</search>Attributes
| Attribute | Description |
|---|---|
| class | Specifies one or more class names for CSS styling. |
| id | Defines a unique identifier for the element. |
| style | Adds inline CSS styles. |
| title | Provides additional information as a tooltip when hovered. |
| aria-label | Provides an accessible name when multiple search landmarks exist. |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Tag Example</title>
<style>
search {
display: block;
max-width: 520px;
padding: 20px;
border: 1px solid #d7e2e5;
border-radius: 10px;
background-color: #f7fbfc;
}
search form {
display: flex;
align-items: end;
gap: 10px;
}
search label {
display: grid;
flex: 1;
gap: 6px;
font-weight: bold;
}
search input,
search button {
padding: 10px 12px;
border-radius: 6px;
}
search input {
border: 1px solid #9fb2b8;
}
search button {
border: 0;
background-color: #29AB87;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Search Our Tutorials</h1>
<search aria-label="Tutorial search">
<form action="/search">
<label for="tutorial-query">
Search tutorials
<input
type="search"
id="tutorial-query"
name="q"
placeholder="Enter HTML, CSS, or JavaScript"
>
</label>
<button type="submit">Search</button>
</form>
</search>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | No |
The <search> element has been supported across major modern browsers since October 2023. Internet Explorer does not support its search-landmark semantics.
Notes
- Use
<search>to contain controls or content related to a search or filtering operation. - The element identifies search semantics; it does not perform the search by itself.
- A
<search>can contain a<form>, but a form is not required for JavaScript-based filtering. - Do not use
<search>as the main container for search results. Results should normally remain in the page's main content. - The element has an implicit
searchlandmark role, so addingrole="search"is unnecessary in supporting browsers. - Use an accessible name such as
aria-labelwhen a page contains multiple search landmarks. - Do not confuse
<search>with<input type="search">; the element is a container, while the input accepts a query. - Both the opening and closing tags are required.
Conclusion
The <search> tag gives clear semantic meaning to search and filtering interfaces.
Use it around the controls for a site-wide search, page search, or filtering feature while keeping the resulting content in the main page area.