ssampscriptsearchsectionselectslotssampscriptsearchsectionselectslotrubyssampsearchsectionselectsmallsearch elementHTMLElement.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.
It's not appropriate to use the search element just for presenting
+ search results, though suggestions and links as part of "quick search" results can be
+ included as part of a search feature. Rather, a returned web page of search results would instead
+ be expected to be presented as part of the main content of that web page.
In the following example, the author is including a search form within the
+ header of the web page:
<header>
+ <h1><a href="/">My fancy blog</a></h1>
+ ...
+ <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>
+</header>In this example, the author has implemented their web application's search functionality
+ entirely with JavaScript. There is no use of the form element to perform
+ server-side submission, but the containing search element semantically identifies
+ the purpose of the descendant content as representing search 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 found:</h3>
+ <ul id="results">
+ <li>
+ <p><a href="services/consulting">Consulting services</a></p>
+ <p>
+ Find out how can we help you improve your business with our integrated consultants, Bob and Bob.
+ </p>
+ </li>
+ ...
+ </ul>
+ <!--
+ when a query returns or filters out all results
+ render the no results message here
+ -->
+ <output id="no-results"></output>
+ </section>
+</search>In the following example, the page has two search features. The first is located in the web page's
+ header and serves as a global mechanism to search the web site's content. Its purpose is
+ indicated by its specified title attribute. The second is included as part of the main content
+ of the page, as it represents a mechanism to search and filter the content of the current page. It contains
+ a heading to indicate its purpose.
<body>
+ <header>
+ ...
+ <search title="Website">
+ ...
+ </search>
+ </header>
+ <main>
+ <h1>Hotels near your location</h1>
+ <search>
+ <h2>Filter results</h2>
+ ...
+ </search>
+ <article>
+ <!-- search result content -->
+ </article>
+ </main>
+</body>div elementA p element's end tag may be omitted if the
p element is immediately followed by an address, article,
- aside, blockquote, details, div, dl,
- fieldset, figcaption, figure, footer, form, h1, h2,
- h3, h4, h5, h6, header,
- hgroup, hr, main, menu, nav,
- ol, p, pre, section, table, or
- ul element, or if there is no more content in the parent element and the parent
+ aside, blockquote, details, div,
+ dl, fieldset, figcaption, figure,
+ footer, form, h1, h2, h3,
+ h4, h5, h6, header, hgroup,
+ hr, main, menu, nav, ol,
+ p, pre, search, section, table,
+ or ul element, or if there is no more content in the parent element and the parent
element is an HTML element that is not an a,
audio, del, ins, map, noscript,
or video element, or an autonomous custom element.
figure, footer, form, frame,
frameset, h1, h2, h3, h4,
h5, h6, head, header, hgroup,
- hr, html, iframe,
+ hr, html, iframe,
img, input, keygen, li, link,
listing, main, marquee, menu,
meta, nav, noembed, noframes,
- noscript, object, ol, p, param,
- plaintext, pre, script, section,
- select, source, style, summary,
- table, tbody, td, template,
- textarea, tfoot, th, thead,
- title, tr, track, ul, wbr,
- xmp; MathML mi, MathML mo,
- MathML mn, MathML ms, MathML
- mtext, and MathML annotation-xml; and SVG
- foreignObject, SVG desc, and SVG
- title.
+ noscript, object, ol, p,
+ param, plaintext, pre, script,
+ search, section, select, source,
+ style, summary, table, tbody,
+ td, template, textarea, tfoot,
+ th, thead, title, tr, track,
+ ul, wbr, xmp; MathML mi,
+ MathML mo, MathML mn, MathML
+ ms, MathML mtext, and MathML
+ annotation-xml; and SVG foreignObject, SVG
+ desc, and SVG title.
An image start tag token is handled by the tree builder,
but it is not in this list because it is not an element; it gets turned into an img
@@ -113058,7 +113170,7 @@ document.body.appendChild(text);
If the stack of open elements does not have an element in scope that is an HTML
@@ -117525,7 +117637,7 @@ html, body { display: block; }
address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
-h3, h4, h5, h6, hgroup, nav, section, table, caption, colgroup, col, thead,
-tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output,
+h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col,
+thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output,
[dir=ltr i], [dir=rtl i], [dir=auto i] {
unicode-bidi: isolate;
}
@@ -117841,8 +117953,8 @@ input[dir=auto i]:is([type=search i], [type=tel i], [type=url i],
address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
-h3, h4, h5, h6, hgroup, nav, section, table, caption, colgroup, col, thead,
-tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, [dir=ltr i],
+h3, h4, h5, h6, hgroup, nav, section, search, table, caption, colgroup, col,
+thead, tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, [dir=ltr i],
[dir=rtl i], [dir=auto i], *|* {
unicode-bidi: bidi-override;
}
@@ -123639,6 +123751,17 @@ interface External {
@namespace url(http://www.w3.org/1999/xhtml);
address, blockquote, center, dialog, div, figure, figcaption, footer, form,
-header, hr, legend, listing, main, p, plaintext, pre, xmp {
+header, hr, legend, listing, main, p, plaintext, pre, search, xmp {
display: block;
}
@@ -117804,8 +117916,8 @@ br[clear=all i], br[clear=both i] { clear: both; }
HTMLScriptElementsearchHTMLElementsections;
samp;
script;
+ search;
section;
select;
slot;
@@ -124470,6 +124594,7 @@ interface External {
ruby;
s;
samp;
+ search;
section;
select;
small;
@@ -126348,6 +126473,10 @@ interface External {
samp
HTMLElement
+ search
+ HTMLElement
+
script
HTMLScriptElement : HTMLElement