<search>
Marks the part of a page that holds a search box or result filters.
- Display
- block
- Closing tag
- Required
- Permitted content
- Flow content
Example
#<search>
<form action="/search">
<label for="query">Search the docs</label>
<input type="search" id="query" name="q" placeholder="e.g. flexbox">
<button>Search</button>
</form>
</search>Definition and usage
#The <search> element covers the controls used for searching or filtering: a search box in a site’s header, a "Search the docs" field, product-list filters. It doesn’t hold the results themselves, only the part where the user types or picks criteria.
Screen readers recognize it as a "search" landmark you can jump to quickly. Previously, the same effect was achieved by adding a role="search" attribute to the form.
Inside it there can be a <form> that sends the query to the server, or just fields that filter a list live with JavaScript. Don’t use <search> for other kinds of forms, such as a newsletter signup or a login form.
It’s a relatively new element: every major browser has supported it since 2023.
Syntax
#<search>
<form>…</form>
</search>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<search>
<label for="filter">Filter courses</label>
<input type="search" id="filter" placeholder="e.g. script">
</search>
<ul id="courses">
<li>HTML and CSS</li>
<li>JavaScript</li>
<li>TypeScript</li>
<li>Python</li>
</ul>
<script>
const input = document.getElementById('filter');
const items = document.querySelectorAll('#courses li');
input.addEventListener('input', () => {
const query = input.value.trim().toLowerCase();
items.forEach((item) => {
item.hidden = !item.textContent.toLowerCase().includes(query);
});
});
</script>Type "script," and only JavaScript and TypeScript will remain in the list. The results list sits outside the <search> element.
Default CSS
#Most browsers display this element with these default styles:
search {
display: block;
}Browser support
#Widely available · since 2023
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Put search results outside
<search>, for example in<main>or a separate<section>. - Always label a search field with
<label>. A placeholder disappears while typing and doesn’t replace a label. - If a page has two search boxes, give them names with
aria-label, for example "Search courses."
Related entries
#- <form>A form that collects data from the user and sends it to a given address.
- <input>A form field: text, email, password, number, date, slider, checkbox, file and many more.
- <label>A form field’s label. Clicking the label moves the cursor to the field.
- <nav>A block of primary navigation links: a menu, a table of contents, breadcrumbs.
- <header>An introduction to a page or section: logo, title, navigation, author info.
Spotted a mistake or missing an example? Write to us.