Exploring the new search element in HTML
by Roland •
A Semantic Boost for Search Fields
The HTML <search> element is a new addition to the language, designed to improve the semantics of search-related content. While it behaves similarly to a <div> in most cases, its true value lies in its ability to convey meaning to browsers, assistive technologies, and developers.
But what makes <search> different from just wrapping an <input> in a <form>? Let’s explore its benefits and practical applications.
Why Use <search>?
Traditionally, search forms are built using a combination of <form>, <input>, and <button>. However, without additional attributes like role="search", their purpose isn’t explicitly clear to assistive technologies. The <search> element solves this by inherently identifying its contents as search-related, improving accessibility and semantic clarity.
Key benefits:
- Improved Semantics: The
<search>element tells browsers and assistive technologies that its content is for search. - Better Accessibility: Screen readers can recognize it as a search section without requiring additional ARIA attributes.
- More Readable Code: Developers can quickly identify search-related sections within the HTML structure.
How to Use <search>
Using the <search> element is straightforward:
<search>
<form action="/search" method="get">
<input type="search" name="q" placeholder="Search..." aria-label="Search">
<button type="submit">🔍</button>
</form>
</search>
This structure is more meaningful than wrapping the form in a generic <div> because it explicitly defines the search purpose. Additionally, modern browsers recognize <search> without requiring extra roles or ARIA attributes.
Browser Support
At the time of writing, browser support for <search> is improving, with recent versions of Chrome, Edge, and Safari recognizing it. However, older browsers may still treat it as a generic block-level element. Since it does not change behavior visually, there’s no downside to using it in your markup today.
<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.
When to Use <search>
The <search> element is ideal for:
- Site-wide search forms (e.g., in a header or navigation bar)
- Search sections within applications (e.g., filtering products in an e-commerce site)
- Search interfaces within a specific page section (e.g., searching within documentation)
However, it’s not a replacement for <form> it’s meant to wrap a search form, not replace it.
The Future of HTML Semantics
The introduction of <search> is another step toward a more semantic and accessible web. While its impact may seem small, improvements like this contribute to better user experiences, especially for those relying on assistive technologies.
If you’re building search functionality, consider adopting <search> in your markup. It’s a simple yet effective way to improve the semantics of your site without affecting its visual presentation.