diff --git a/files/en-us/web/html/element/index.md b/files/en-us/web/html/element/index.md index e5382d0086790a5..aff868a92ff9609 100644 --- a/files/en-us/web/html/element/index.md +++ b/files/en-us/web/html/element/index.md @@ -53,6 +53,7 @@ Content sectioning elements allow you to organize the document content into logi | {{HTMLElement("main")}} | Represents the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. | | {{HTMLElement("nav")}} | Represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes. | | {{HTMLElement("section")}} | Represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions. | +| {{HTMLElement("search")}} | Represents a part that contains a set of form controls or other content related to performing a search or filtering operation. | ## Text content diff --git a/files/en-us/web/html/element/search/index.md b/files/en-us/web/html/element/search/index.md new file mode 100644 index 000000000000000..ebda3ad7343240a --- /dev/null +++ b/files/en-us/web/html/element/search/index.md @@ -0,0 +1,161 @@ +--- +title: ": The generic search element" +slug: Web/HTML/Element/search +page-type: html-element +browser-compat: html.elements.search +--- + +{{HTMLSidebar}} + +The **``** [HTML](/en-US/docs/Web/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 `` 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. + +## Attributes + +This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes). + +## Usage notes + +The `` 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 `` element as they are search features. + +## Examples + +### Header search form + +This example demonstrates the use of `` as the container for a search within a website header to perform a simple site-wide search. The `` is a semantic container for the {{HTMLElement("form")}} that submits the user-entered search query to a server. + +#### HMTL + +```html +
+

Movie website

+ +
+ + + +
+ +
+``` + +#### Result + +{{EmbedLiveSample('Header search form')}} + +### Web app search + +This example demonstrates potential DOM content when dynamically including JavaScript search functionality in a web application. When search functionality is implemented entirely with JavaScript, if no form is submitted, neither a {{HTMLElement("form")}} element nor a submit {{HTMLElement("button")}} is required. For semantics, the `` element is included to contain the search and filtering capabilities. + +#### HMTL + +```html + + + + +
+

Results:

+
    + +
+ + + +
+ +``` + +#### Result + +{{EmbedLiveSample('Web app search')}} + +> **Note:** Remember that some users don't have JavaScript, and none of your users have JavaScript running until the JavaScript is successfully downloaded, parsed, and executed, ensure your users can access the content of your site with JavaScript disabled. + +### Multiple searches + +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. + +#### HMTL + +```html + +
+

Car rental agency

+ ... +
+
+

Cars available for rent

+ +

Filter results

+ ... + +
+ +
+
+ +``` + +#### Result + +{{EmbedLiveSample('Multiple searches')}} + +## Technical summary + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Content categories + + Flow content, palpable content. +
Permitted content + Flow content. +
Tag omission{{no_tag_omission}}
Implicit ARIA role + search +
Permitted ARIA roles + form, group, none, presentation, region, search +
DOM interface{{domxref("HTMLElement")}}
+ +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- Other search-related elements: {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}}, {{HTMLElement("form")}} +- [ARIA: Search role](/en-US/docs/Web/Accessibility/ARIA/Roles/search_role) diff --git a/files/en-us/web/html/index.md b/files/en-us/web/html/index.md index 841f1584d4358dd..b5da77bfce24891 100644 --- a/files/en-us/web/html/index.md +++ b/files/en-us/web/html/index.md @@ -10,7 +10,7 @@ page-type: landing-page "Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web. -HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} and many others. +HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("search")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} and many others. An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "`<`" and "`>`". The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the `` tag can be written as `<Title>`, `<TITLE>`, or in any other way. However, the convention and recommended practice is to write tags in lowercase.