<search>

Definition and Usage

The <search> tag represents a part of the document containing search or filtering functionality.

This is a new semantic element that helps browsers and assistive technologies identify search-related content, improving accessibility and navigation.

The <search> element creates a landmark role automatically, making it easier for screen reader users to locate and navigate to search functionality.

Attributes

The <search> tag supports the Global Attributes in HTML.

The <search> tag also supports the Event Attributes in HTML.

Examples

Basic Search Form

Create a simple search form with semantic markup:

<search>
  <form action="/search" method="get">
    <label for="search-input">Search:</label>
    <input type="search" id="search-input" name="q" placeholder="Search..." />
    <button type="submit">Search</button>
  </form>
</search>

Header Search

Include search functionality in the page header:

<header>
  <h1>My Website</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>

  <search>
    <form role="search" action="/search">
      <input type="search" name="q" placeholder="Search site..." aria-label="Search" />
      <button type="submit">Go</button>
    </form>
  </search>
</header>

Sidebar Search Widget

Add search to a sidebar or aside:

<aside>
  <search>
    <h2>Search Products</h2>
    <form action="/products/search">
      <input
        type="search"
        name="query"
        placeholder="Find products..."
        aria-label="Search products"
      />
      <button type="submit">Search</button>
    </form>
  </search>
</aside>

Styled Search with Filters

Create a search interface with filters:

<search>
  <form action="/search" method="get">
    <div class="search-container">
      <input
        type="search"
        name="q"
        placeholder="What are you looking for?"
        aria-label="Search query"
      />
      <button type="submit">Search</button>
    </div>

    <div class="filters">
      <label>
        <input type="checkbox" name="category" value="news" />
        News
      </label>
      <label>
        <input type="checkbox" name="category" value="blog" />
        Blog
      </label>
      <label>
        <input type="checkbox" name="category" value="docs" />
        Documentation
      </label>
    </div>
  </form>
</search>

Search with Autocomplete

Implement search with autocomplete suggestions:

<search>
  <form action="/search">
    <label for="search-field">Search:</label>
    <input
      type="search"
      id="search-field"
      name="q"
      list="suggestions"
      placeholder="Type to search..."
      autocomplete="off">
    <datalist id="suggestions">
      <option value="HTML Tutorial">
      <option value="CSS Guide">
      <option value="JavaScript Basics">
      <option value="Web Development">
    </datalist>
    <button type="submit">Search</button>
  </form>
</search>

Styled Search Component

Apply custom styling to the search element:

<style>
  search {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
  }

  search form {
    display: flex;
    gap: 10px;
  }

  search input[type="search"] {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
  }

  search button {
    padding: 10px 24px;
    background: #745af2;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
  }

  search button:hover {
    background: #5a3fd8;
  }
</style>

<search>
  <form action="/search">
    <input type="search" name="q" placeholder="Search..." aria-label="Search">
    <button type="submit">Search</button>
  </form>
</search>

Try it Yourself

Accessibility Benefits

The <search> element provides significant accessibility improvements:

• Landmark Role: Automatically creates a search landmark for screen readers
• Navigation: Users can jump directly to search functionality using keyboard shortcuts
• Context: Clearly identifies search-related content for assistive technologies
• Discoverability: Makes search features easier to find for all users
• Semantic Meaning: Provides clear purpose without requiring ARIA attributes

Search vs Form with role="search"

Understanding the difference between the new <search> element and the traditional approach:

<!-- Old approach -->
<form role="search" action="/search">
  <input type="search" name="q" />
  <button>Search</button>
</form>

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

When to Use Search

• Site-wide search forms in headers or navigation
• Product search and filtering on e-commerce sites
• Document or content search functionality
• Advanced search forms with multiple criteria
• Filter panels that help users find specific content
• Any UI component primarily focused on search or filtering

Best Practices

• Use <search> for search functionality, not general forms
• Include an aria-label if the search purpose isn't obvious from context
• Use type="search" for the input field within the search element
• Ensure the search form is keyboard accessible (Tab navigation, Enter to submit)
• Provide clear placeholder text or labels for search inputs
• Consider using autocomplete or suggestions for better UX
• Style the search element to be visually distinct and easy to find
• Use only one main <search> landmark per page (or use aria-label to distinguish multiple)
• Test with screen readers to ensure proper landmark navigation

Semantic HTML Benefits

• Improves accessibility for users with disabilities
• Helps search engines understand page structure
• Makes code more maintainable and self-documenting
• Enables better browser features (e.g., reader mode)
• Future-proofs your code as web standards evolve
• Reduces reliance on ARIA attributes for basic functionality

Default CSS Settings

Most browsers will display the <search> element with the following default values:

search {
  display: block;
}

Related Tags

• <form>

  Defines an HTML form

• <input>

  Defines an input control

• <button>

  Defines a clickable button

• <label>

  Defines a label for input

• <nav>

  Defines navigation links