<search>
Overview
The <search> element is a newer addition to the HTML Living Standard. It designates a section of a document or application intended for search or filtering activities. According to the specification:
"The search element represents a part of a document or application that contains a set of form controls or other content related to performing a search or filtering operation. This could be a search of the web site or application; a way of searching or filtering search results on the current web page; or a global or Internet-wide search function."
This introduction aims to bridge a longstanding gap between ARIA and native HTML landmarks, improving the semantic richness of the language and potentially simplifying the developer's job by reducing the reliance on ARIA roles.
Examples and Usage
The <search> element is envisioned as a tool to encapsulate various form controls and content related to search or filtering operations. Its core aim is to provide a clear semantic indication for areas of a web document dedicated to search or filtering functionality.
For instance, consider a typical search functionality embedded within a website's header:
<search>
<form action="search.php">
<label for="query">Find an article</label>
<input id="query" name="q" type="search">
<button type="submit">Go!</button>
</form>
</search>
This setup semantically identifies the form's purpose as offering search capabilities. While it's not recommended to use the <search> element solely to display search results, integrating suggestions and links as part of "quick search" results can complement a search feature. Conversely, a page dedicated to displaying search results should typically feature those results as the main content, not within a <search> element.
Being a recent addition, the element does not have browser support at the moment. This example is illustrative and hypothetical, given the current lack of support.
Note: The example and usage guidance are inspired by conventions laid out in the HTML Living Standard.
Attribute Breakdown
The <search> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.
Accessibility Aspects
The introduction of <search> underscores an ongoing push to bolster web accessibility. By providing a native HTML alternative to the ARIA search role, developers can make their content more accessible without relying on ARIA. However, while this element aims to improve semantic clarity and accessibility, its adoption and impact will depend on widespread browser support and correct usage by developers.
Associated Elements
<aside><footer><form><header><nav>
Additional Notes
There has been some debate about the necessity of the
<search>element, considering that developers can achieve similar functionality using the<form>element with an ARIAsearchrole.Current implementations often involve elements like
<div>,<form>, or<section>combined with ARIA roles to achieve similar results.Developers interested in the evolution of HTML are encouraged to keep an eye on new proposals, contribute to discussions, and even provide feedback on issues or potential improvements.
Browser Compatibility
As of now, the <search> element lacks support across all major browsers. Implementation requests have been submitted for major browsers, but it remains to be seen when or if they will be adopted. The future of this element depends on its acceptance by browser implementors and the broader developer community.
| Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
|---|---|---|---|---|---|---|
| Support | No | No | No | No | No | No |
Useful Resources
Can I use HTML element: search
The HTML Living Standard Specification: search