<li><code>s</code></li>

<li><code>samp</code></li>

<li><code>script</code></li>

<li><code>search</code></li>

<li><code>section</code></li>

<li><code>select</code></li>

<li><code>slot</code></li>

<li><code>ruby</code></li>

<li><code>s</code></li>

<li><code>samp</code></li>

<li><code>search</code></li>

<li><code>section</code></li>

<li><code>select</code></li>

<li><code>small</code></li>

</div>

<h4>The <dfn element><code>search</code></dfn> element</h4>

<dl class="element">

<dt><span data-x="concept-element-categories">Categories</span>:</dt>

<dd><span>Flow content</span>.</dd>

<dd><span>Palpable content</span>.</dd>

<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>

<dd>Where <span>flow content</span> is expected.</dd>

<dt><span data-x="concept-element-content-model">Content model</span>:</dt>

<dd><span>Flow content</span>.</dd>

<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>

<dd><span>Global attributes</span></dd>

<dt><span data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>

<dd><a href="https://w3c.github.io/html-aria/#el-search">For authors</a>.</dd>

<dd><a href="https://w3c.github.io/html-aam/#el-search">For implementers</a>.</dd>

<dt><span data-x="concept-element-dom">DOM interface</span>:</dt>

<dd>Uses <code>HTMLElement</code>.</dd>

</dl>

<p>The <code>search</code> element <span>represents</span> 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.</p>

<p class="note">It's not appropriate to use the <code>search</code> 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.</p>

<div class="example">

<p>In the following example, the author is including a search form within the

<code>header</code> of the web page:</p>

<pre><code class="html">&lt;header>

&lt;h1>&lt;a href="/">My fancy blog&lt;/a>&lt;/h1>

...

&lt;search>

&lt;form action="search.php">

&lt;label for="query">Find an article&lt;/label>

&lt;input id="query" name="q" type="search">

&lt;button type="submit">Go!&lt;/button>

&lt;/form>

&lt;/search>

&lt;/header></code></pre>

</div>

<div class="example">

<p>In this example, the author has implemented their web application's search functionality

entirely with JavaScript. There is no use of the <code>form</code> element to perform

server-side submission, but the containing <code>search</code> element semantically identifies

the purpose of the descendant content as representing search capabilities.</p>

<pre><code class="html">&lt;search>

&lt;label>

Find and filter your query

&lt;input type="search" id="query">

&lt;/label>

&lt;label>

&lt;input type="checkbox" id="exact-only">

Exact matches only

&lt;/label>

&lt;section>

&lt;h3>Results found:&lt;/h3>

&lt;ul id="results">

&lt;li>

&lt;p>&lt;a href="services/consulting">Consulting services&lt;/a>&lt;/p>

&lt;p>

Find out how can we help you improve your business with our integrated consultants, Bob and Bob.

&lt;/p>

&lt;/li>

...

&lt;/ul>

&lt;!--

when a query returns or filters out all results

render the no results message here

-->

&lt;output id="no-results">&lt;/output>

&lt;/section>

&lt;/search></code></pre>

</div>

<div class="example">

<p>In the following example, the page has two search features. The first is located in the web page's

<code>header</code> and serves as a global mechanism to search the web site's content. Its purpose is

indicated by its specified <code>title</code> 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.</p>

<pre><code class="html">&lt;body>

&lt;header>

...

&lt;search title="Website">

...

&lt;/search>

&lt;/header>

&lt;main>

&lt;h1>Hotels near your location&lt;/h1>

&lt;search>

&lt;h2>Filter results&lt;/h2>

...

&lt;/search>

&lt;article>

&lt;!-- search result content -->

&lt;/article>

&lt;/main>

&lt;/body></code></pre>

</div>

<h4>The <dfn element><code>div</code></dfn> element</h4>

<!-- </p> -->

<p>A <code>p</code> element's <span data-x="syntax-end-tag">end tag</span> may be omitted if the

<code>p</code> element is immediately followed by an <code>address</code>, <code>article</code>,

<code>aside</code>, <code>blockquote</code>, <code>details</code>, <code>div</code>, <code>dl</code>,

<code>fieldset</code>, <code>figcaption</code>, <code>figure</code>, <code>footer</code>, <code>form</code>, <code>h1</code>, <code>h2</code>,

<code>h3</code>, <code>h4</code>, <code>h5</code>, <code>h6</code>, <code>header</code>,

<code>hgroup</code>, <code>hr</code>, <code>main</code>, <code>menu</code>, <code>nav</code>,

<code>ol</code>, <code>p</code>, <code>pre</code>, <code>section</code>, <code>table</code>, or

<code>ul</code> element, or if there is no more content in the parent element and the parent

<code>aside</code>, <code>blockquote</code>, <code>details</code>, <code>div</code>,

<code>dl</code>, <code>fieldset</code>, <code>figcaption</code>, <code>figure</code>,

<code>footer</code>, <code>form</code>, <code>h1</code>, <code>h2</code>, <code>h3</code>,

<code>h4</code>, <code>h5</code>, <code>h6</code>, <code>header</code>, <code>hgroup</code>,

<code>hr</code>, <code>main</code>, <code>menu</code>, <code>nav</code>, <code>ol</code>,

<code>p</code>, <code>pre</code>, <code>search</code>, <code>section</code>, <code>table</code>,

or <code>ul</code> element, or if there is no more content in the parent element and the parent

element is an <span data-x="HTML elements">HTML element</span> that is not an <code>a</code>,

<code>audio</code>, <code>del</code>, <code>ins</code>, <code>map</code>, <code>noscript</code>,

or <code>video</code> element, or an <span>autonomous custom element</span>.</p>

<code>figure</code>, <code>footer</code>, <code>form</code>, <code>frame</code>,

<code>frameset</code>, <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>,

<code>h5</code>, <code>h6</code>, <code>head</code>, <code>header</code>, <code>hgroup</code>,

<code>hr</code>, <code>html</code>, <code>iframe</code>, <!-- <code>image</code>, (commented out

because this isn't an element that can end up on the stack, so it doesn't matter) -->

<code>hr</code>, <code>html</code>, <code>iframe</code>, <!-- <code>image</code>, (commented

outbecause this isn't an element that can end up on the stack, so it doesn't matter) -->

<code>img</code>, <code>input</code>, <code>keygen</code>, <code>li</code>, <code>link</code>,

<code>listing</code>, <code>main</code>, <code>marquee</code>, <code>menu</code>,

<code>meta</code>, <code>nav</code>, <code>noembed</code>, <code>noframes</code>,

<code>noscript</code>, <code>object</code>, <code>ol</code>, <code>p</code>, <code>param</code>,

<code>plaintext</code>, <code>pre</code>, <code>script</code>, <code>section</code>,

<code>select</code>, <code>source</code>, <code>style</code>, <code>summary</code>,

<code>table</code>, <code>tbody</code>, <code>td</code>, <code>template</code>,

<code>textarea</code>, <code>tfoot</code>, <code>th</code>, <code>thead</code>,

<code>title</code>, <code>tr</code>, <code>track</code>, <code>ul</code>, <code>wbr</code>,

<code>xmp</code>; <span>MathML <code>mi</code></span>, <span>MathML <code>mo</code></span>,

<span>MathML <code>mn</code></span>, <span>MathML <code>ms</code></span>, <span>MathML

<code>mtext</code></span>,and<span>MathML <code>annotation-xml</code></span>; and <span>SVG

<code>foreignObject</code></span>,<span>SVG <code>desc</code></span>, and <span>SVG

<code>title</code></span>.</p> <!-- we could actually put all non-HTML elements in this list, I

think -->

<code>noscript</code>, <code>object</code>, <code>ol</code>, <code>p</code>,

<code>param</code>, <code>plaintext</code>, <code>pre</code>, <code>script</code>,

<code>search</code>, <code>section</code>, <code>select</code>, <code>source</code>,

<code>style</code>, <code>summary</code>, <code>table</code>, <code>tbody</code>,

<code>td</code>, <code>template</code>, <code>textarea</code>, <code>tfoot</code>,

<code>th</code>, <code>thead</code>, <code>title</code>, <code>tr</code>, <code>track</code>,

<code>ul</code>, <code>wbr</code>, <code>xmp</code>; <span>MathML <code>mi</code></span>,

<span>MathML <code>mo</code></span>, <span>MathML <code>mn</code></span>, <span>MathML

<code>ms</code></span>, <span>MathML <code>mtext</code></span>, and <span>MathML

<code>annotation-xml</code></span>; and<span>SVG <code>foreignObject</code></span>, <span>SVG

<code>desc</code></span>, and <span>SVG <code>title</code></span>.</p> <!-- we could actually

put all non-HTML elements in this list, Ithink -->

<p class="note">An <code data-x="">image</code> 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 <code>img</code>

<!-- the normal ones -->

<dt>A start tag whose tag name is one of: "address", "article", "aside", "blockquote", "center",

"details", "dialog", "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer", "header",

"hgroup", "main", "menu", "nav", "ol", "p", "section", "summary", "ul"</dt>

"hgroup", "main", "menu", "nav", "ol", "p", "search", "section", "summary", "ul"</dt>

<dd>

<!-- As of May 2008 this doesn't match any browser exactly, but is as close to what IE does as I

can get without doing the non-tree DOM nonsense, and thus should actually afford better

<!-- the normal ones -->

<dt>An end tag whose tag name is one of: "address", "article", "aside", "blockquote", "button",

"center", "details", "dialog", "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer",

"header", "hgroup", "listing", "main", "menu", "nav", "ol", "pre", "section", "summary",

"ul"</dt>

"header", "hgroup", "listing", "main", "menu", "nav", "ol", "pre", "search", "section",

"summary", "ul"</dt>

<dd>

<p>If the <span>stack of open elements</span> does not <span data-x="has an element in

scope">have an element in scope</span> that is an <span data-x="HTML elements">HTML

<pre><code class="css">@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;<!-- see also unicode-bidi: isolate rules-->

}

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; <!-- anything that's similar to display:block, plus <bdi>, <output>, and dir="" -->

}

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;

}

<td><code>HTMLScriptElement</code></td>

</tr>

<tr>

<th><code>search</code></th>

<td>Container for search controls</td>

<td><span data-x="Flow content">flow</span>;

<span data-x="Palpable content">palpable</span></td>

<td><span data-x="Flow content">flow</span></td>

<td><span data-x="Flow content">flow</span></td>

<td><span data-x="global attributes">globals</span></td>

<td><code>HTMLElement</code></td>

</tr>

<tr>

<th><code>section</code></th>

<td>Generic document or application section</td>

<code>s</code>;

<code>samp</code>;

<code>script</code>;

<code>search</code>;

<code>section</code>;

<code>select</code>;

<code>slot</code>;

<code>ruby</code>;

<code>s</code>;

<code>samp</code>;

<code>search</code>;

<code>section</code>;

<code>select</code>;

<code>small</code>;

<td> <code>samp</code>

<td> <code>HTMLElement</code>

<tr>

<td> <code>search</code>

<td> <code>HTMLElement</code>

<tr>

<td> <code>script</code>

<td> <code>HTMLScriptElement</code> : <code>HTMLElement</code>