Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add the <search> element #7320

Merged
merged 2 commits into from
Mar 24, 2023
Merged

Add the <search> element #7320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
303b37e
Add the <search> element
domenic Nov 8, 2021
09486ba
Newlines
domenic Feb 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions images/content-venn.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
185 changes: 157 additions & 28 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11075,6 +11075,7 @@ console.assert(image.height === 200);</code></pre>
<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>
Expand Down Expand Up @@ -11376,6 +11377,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
<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>
Expand Down Expand Up @@ -20100,6 +20102,115 @@ included with Exhibit B.
</div>


domenic marked this conversation as resolved.
Show resolved Hide resolved
<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>

Expand Down Expand Up @@ -106631,12 +106742,13 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
<!-- </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>
Expand Down Expand Up @@ -108919,23 +109031,23 @@ dictionary <dfn dictionary>StorageEventInit</dfn> : <span>EventInit</span> {
<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
out because 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, I think -->

<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>
Expand Down Expand Up @@ -113058,7 +113170,7 @@ document.body.appendChild(text);
<!-- 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
Expand Down Expand Up @@ -113290,8 +113402,8 @@ document.body.appendChild(text);
<!-- 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
Expand Down Expand Up @@ -117525,7 +117637,7 @@ html, body { display: block; }</code></pre>
<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-->
}

Expand Down Expand Up @@ -117804,8 +117916,8 @@ br[clear=all i], br[clear=both i] { clear: both; }</code></pre>

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="" -->
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -123639,6 +123751,17 @@ interface <dfn interface>External</dfn> {
<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>
Expand Down Expand Up @@ -124179,6 +124302,7 @@ interface <dfn interface>External</dfn> {
<code>s</code>;
<code>samp</code>;
<code>script</code>;
<code>search</code>;
<code>section</code>;
<code>select</code>;
<code>slot</code>;
Expand Down Expand Up @@ -124470,6 +124594,7 @@ interface <dfn interface>External</dfn> {
<code>ruby</code>;
<code>s</code>;
<code>samp</code>;
<code>search</code>;
<code>section</code>;
<code>select</code>;
<code>small</code>;
Expand Down Expand Up @@ -126348,6 +126473,10 @@ interface <dfn interface>External</dfn> {
<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>
Expand Down