Skip to content
html.sh

<search> - Search Element

The <search> Element

Section titled “The <search> Element”
Landmark HTML 2023

The <search> element represents a part of a document or application that contains search or filtering functionality. It provides a semantic way to identify search interfaces, making them more accessible to assistive technologies and improving the overall structure of your HTML.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<search>
  <!-- Search or filtering interface -->
</search>

Attributes

Section titled “Attributes”

Element-Specific Attributes

Section titled “Element-Specific Attributes”

The <search> element has no element-specific attributes.

Global Attributes

Section titled “Global Attributes”

This element supports all global attributes.

Common Use Cases

Section titled “Common Use Cases”

Basic Search Form

Section titled “Basic Search Form”

A simple search form in the header:

Result

Advanced Search with Filters

Section titled “Advanced Search with Filters”

A search interface with multiple filter options:

Result
Section titled “Site-Wide Search”

A prominent site-wide search feature:

Result

Data Table Filtering

Section titled “Data Table Filtering”

Search functionality for filtering table data:

Result

Search with Autocomplete Suggestions

Section titled “Search with Autocomplete Suggestions”

Search interface with suggestion list:

Result
Section titled “E-commerce Product Search”

Product search with category navigation:

Result

Quick Search (No Form)

Section titled “Quick Search (No Form)”

A search interface without a traditional form submission:

Result

Search vs. Form

Section titled “Search vs. Form”

Understanding when to use <search>:

<!-- Good: Search functionality -->
<search>
  <form action="/search">
    <input type="search" name="q">
    <button>Search</button>
  </form>
</search>


<!-- Good: Filtering interface -->
<search>
  <label>Filter by category:</label>
  <select onchange="filterResults(this.value)">
    <option>All</option>
    <option>Category 1</option>
  </select>
</search>


<!-- Wrong: Contact form (not search) -->
<search>
  <form action="/contact">
    <input type="text" name="name" placeholder="Your name">
    <input type="email" name="email" placeholder="Email">
    <button>Submit</button>
  </form>
</search>


<!-- Correct: Use form directly -->
<form action="/contact">
  <input type="text" name="name" placeholder="Your name">
  <input type="email" name="email" placeholder="Email">
  <button>Submit</button>
</form>

Best Practices

Section titled “Best Practices”
Section titled “Label Your Search”

Provide clear labeling for accessibility:

<!-- Good: Visible label -->
<search>
  <form action="/search">
    <label for="site-search">Search the site:</label>
    <input type="search" id="site-search" name="q">
    <button>Search</button>
  </form>
</search>


<!-- Good: aria-label when no visible label -->
<search>
  <form action="/search">
    <input type="search" name="q" aria-label="Search articles" placeholder="Search...">
    <button aria-label="Submit search">🔍</button>
  </form>
</search>

Use Appropriate Input Type

Section titled “Use Appropriate Input Type”

Use type="search" for search inputs:

<search>
  <form action="/search">
    <!-- Good: type="search" -->
    <input type="search" name="q" placeholder="Search...">


    <!-- Avoid: type="text" for search -->
    <input type="text" name="q" placeholder="Search...">
  </form>
</search>

Include a Submit Button

Section titled “Include a Submit Button”

Always provide a way to submit the search:

<!-- Good: Submit button -->
<search>
  <form action="/search">
    <input type="search" name="q">
    <button type="submit">Search</button>
  </form>
</search>


<!-- Also good: Icon button with label -->
<search>
  <form action="/search">
    <input type="search" name="q" aria-label="Search">
    <button type="submit" aria-label="Submit search">🔍</button>
  </form>
</search>

Multiple Search Elements

Section titled “Multiple Search Elements”

You can have multiple search elements on a page:

<!-- Site-wide search in header -->
<header>
  <search aria-label="Site search">
    <form action="/search">
      <input type="search" name="q" aria-label="Search entire site">
      <button>Search</button>
    </form>
  </search>
</header>


<!-- Local search within content -->
<main>
  <section>
    <h2>Products</h2>
    <search aria-label="Product search">
      <form action="/products/search">
        <input type="search" name="q" aria-label="Search products">
        <button>Filter</button>
      </form>
    </search>
  </section>
</main>

Accessibility

Section titled “Accessibility”

Search Landmark

Section titled “Search Landmark”

The <search> element creates a search landmark that assistive technologies can identify:

<!-- Creates a search landmark -->
<search>
  <form action="/search">
    <input type="search" name="q" aria-label="Search">
    <button>Search</button>
  </form>
</search>

Screen reader users can navigate directly to search landmarks using keyboard shortcuts.

Labeling Multiple Search Regions

Section titled “Labeling Multiple Search Regions”

When you have multiple search elements, label them distinctly:

<search aria-label="Main site search">
  <!-- Primary search -->
</search>


<search aria-label="Product filters">
  <!-- Product filtering -->
</search>

Keyboard Accessibility

Section titled “Keyboard Accessibility”

Ensure all search controls are keyboard accessible:

<search>
  <form action="/search">
    <!-- All these elements are focusable and keyboard-accessible -->
    <input type="search" name="q">
    <select name="category">
      <option>All</option>
    </select>
    <button type="submit">Search</button>
  </form>
</search>

Browser Support

Section titled “Browser Support”
BrowserVersion
Chrome118+
Firefox118+
Safari17+
Edge118+
IENot supported

Polyfill for Older Browsers

Section titled “Polyfill for Older Browsers”

For older browsers, you can add ARIA to provide similar functionality:

<!-- Modern browsers -->
<search>
  <form action="/search">
    <input type="search" name="q">
    <button>Search</button>
  </form>
</search>


<!-- Fallback for older browsers -->
<div role="search">
  <form action="/search">
    <input type="search" name="q">
    <button>Search</button>
  </form>
</div>
Section titled “Related Elements”

Common Mistakes

Section titled “Common Mistakes”

Using for Non-Search Forms

Section titled “Using for Non-Search Forms”
<!-- Wrong: Login form in search element -->
<search>
  <form action="/login">
    <input type="email" name="email">
    <input type="password" name="password">
    <button>Log In</button>
  </form>
</search>


<!-- Correct: Use form directly -->
<form action="/login">
  <input type="email" name="email">
  <input type="password" name="password">
  <button>Log In</button>
</form>

Missing Form Element

Section titled “Missing Form Element”
<!-- Incomplete: Input without form -->
<search>
  <input type="search" name="q">
  <button>Search</button>
</search>


<!-- Better: Wrap in form -->
<search>
  <form action="/search">
    <input type="search" name="q">
    <button type="submit">Search</button>
  </form>
</search>

No Accessible Label

Section titled “No Accessible Label”
<!-- Wrong: No label -->
<search>
  <form action="/search">
    <input type="search" name="q">
    <button>Go</button>
  </form>
</search>


<!-- Correct: Add label -->
<search>
  <form action="/search">
    <input type="search" name="q" aria-label="Search the site">
    <button>Search</button>
  </form>
</search>

Specifications

Section titled “Specifications”