Syntax
<search>
<form role="search">
<input type="search" name="q">
</form>
</search>Examples
Site Search
Wrapping a site-wide search form.
<search>
<form action="/search" method="get">
<label for="q">Search Codectionary</label>
<input type="search" id="q" name="q" placeholder="Search docs...">
<button type="submit">Search</button>
</form>
</search>Filter Controls
Using search to wrap filtering controls for a list of results.
<search>
<label for="filter">Filter by language:</label>
<select id="filter">
<option>All</option>
<option>HTML</option>
<option>CSS</option>
</select>
</search>Header Search Bar
A compact search bar placed in the site header.
<header>
<search>
<input type="search" placeholder="Quick search..." style="padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db;">
</search>
</header>Best practices
- Use search to wrap the form and controls for search/filter functionality, not the results themselves
- It can be used for both site-wide search and in-page filtering — both are valid uses
- Being a newer element, verify support in your target browsers; it degrades gracefully to an unstyled generic container in older ones
- Continue using a real form inside it for the actual search input — search is a landmark wrapper, not a replacement for form semantics
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<header>
The <header> element represents introductory content for its nearest ancestor sectioning element, typically containing a logo, site title, navigation, or search form. A page can have multiple <header> elements — one for the page itself, and others for individual <article> or <section> elements. It has no default visual styling of its own.<nav>
The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.<footer>
The <footer> element represents closing content for its nearest ancestor sectioning element, typically containing copyright notices, contact information, related links, or author details. Like <header>, a page can have multiple footers — one for the whole page and others scoped to individual articles or sections.<section>
The <section> element groups related content that typically has its own heading, representing a distinct thematic section of a document — like a chapter, tab panel, or a chunk of a landing page. Unlike <div>, which carries no semantic meaning, <section> tells browsers and assistive technology that its content forms a standalone, related group. If content does not have a natural heading or is not thematically distinct, a plain <div> is usually the better choice.
The <header> element represents introductory content for its nearest ancestor sectioning element, typically containing a logo, site title, navigation, or search form. A page can have multiple <header> elements — one for the page itself, and others for individual <article> or <section> elements. It has no default visual styling of its own.<nav>
The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.<footer>
The <footer> element represents closing content for its nearest ancestor sectioning element, typically containing copyright notices, contact information, related links, or author details. Like <header>, a page can have multiple footers — one for the whole page and others scoped to individual articles or sections.<section>
The <section> element groups related content that typically has its own heading, representing a distinct thematic section of a document — like a chapter, tab panel, or a chunk of a landing page. Unlike <div>, which carries no semantic meaning, <section> tells browsers and assistive technology that its content forms a standalone, related group. If content does not have a natural heading or is not thematically distinct, a plain <div> is usually the better choice.