← Back to All Tags

<search>

Defines a semantic landmark for search functionality

✨ HTML5

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.

Tip: Use <search> to wrap search forms, filter panels, or any search-related UI components.
Note: The <search> element is a recent addition to HTML and provides semantic meaning without visual styling.

Browser Support

The <search> tag is supported in modern browsers:

Chrome
Chrome
118.0+
Firefox
Firefox
119.0+
Safari
Safari
17.0+
Edge
Edge
118.0+
Opera
Opera
104.0+

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:

Example

<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:

Example

<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:

Example

<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:

Example

<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:

Example

<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:

Example

<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

Interactive Example

Here's a live search component:

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
Tip: Screen reader users can use landmark navigation (e.g., "S" key in NVDA/JAWS) to jump directly to the search element.

Search vs Form with role="search"

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

Approach Implementation Notes
New: <search> <search>...</search> Native semantic element, cleaner markup, automatic landmark
Old: Form with ARIA <form role="search">...</form> Works in all browsers, requires ARIA role, more verbose
Generic Div <div class="search">...</div> No semantic meaning, poor accessibility, not recommended

Migration Example

<!-- 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:

Default CSS

search {
  display: block;
}

Related Tags