<search> HTML element is a container representing the parts of the document or application with form controls or other content related to performing a search or filtering operation. The
<search> element semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof.
This element only includes the global attributes.
<search> element is not for presenting search results. Rather, search or filtered results should be presented as part of the main content of that web page. That said, suggestions and links that are part of "quick search" functionality within the search or filtering functionality are appropriately nested within the contents of the
<search> element as they are search features.
This example demonstrates the use of
<search> as the container for a search within a website header to perform a simple site-wide search. The
<search> is a semantic container for the
<form> that submits the user-entered search query to a server.
<header> <h1>Movie website</h1> <search> <form action="./search/"> <label for="movie">Find a Movie</label> <input type="search" id="movie" name="q" /> <button type="submit">Search</button> </form> </search> </header>
<form> element nor a submit
<button> is required. For semantics, the
<search> element is included to contain the search and filtering capabilities.
<search> <label> Find and filter your query <input type="search" id="query" /> </label> <label> <input type="checkbox" id="exact-only" /> Exact matches only </label> <section> <h3>Results:</h3> <ul id="results"> <!-- search result content --> </ul> <output id="no-results"> <!-- no results content --> </output> </section> </search>
This example demonstrates a page with two search features. The first is a global site search located on the header. The second is a search and filter based on the page context, in our example a car search.
<body> <header> <h1>Car rental agency</h1> <search title="Website">...</search> </header> <main> <h2>Cars available for rent</h2> <search title="Cars"> <h3>Filter results</h3> ... </search> <article> <!-- search result content --> </article> </main> </body>
|HTML Standard |
BCD tables only load in the browser