---
title: "The HTML Search Element: A Native Tag for Search Forms"
description: "The <search> element wraps a search form or filter controls so browsers and screen readers know their purpose. When to use it, with input type=search examples."
canonical: "https://www.trevorlasn.com/blog/html-search-element"
author: "Trevor I. Lasn"
published: "2024-12-02"
last-updated: "2024-12-02"
topics: ["HTML"]
---

# The HTML Search Element: A Native Tag for Search Forms

The <search> element wraps a search form or filter controls so browsers and screen readers know their purpose. When to use it, with input type=search examples.

By Trevor I. Lasn · Published 2024-12-02 · https://www.trevorlasn.com/blog/html-search-element

The HTML specification introduced [the search element](https://html.spec.whatwg.org/multipage/grouping-content.html#the-search-element) in 2023 as a dedicated container for search interfaces. 

[Browser support for `search` on webstatus.dev](https://webstatus.dev/features/search)

The `<search>` element acts as a semantic wrapper for search forms and filtering UI components. It provides better accessibility than generic `<div>` elements and clarifies the purpose of search-related content to both browsers and assistive technologies.

Before its introduction, developers relied on generic div elements with ARIA roles to indicate search regions - a workable but less than ideal solution. The search element changes this by providing native semantic meaning for search and filtering interfaces.

### `<search>` HTML Element

<div class="pt-2" />

```html
<search> <!-- NEW -->
  <form>
    <input type="search" placeholder="Search...">
    <button type="submit">Search</button>
  </form>
</search>
```

The `type="search"` input provides platform-specific features like clear buttons on some browsers. 

The explicit label helps all users understand what they're searching for, while the ARIA label provides additional context for screen readers.

```html
<search>
  <h2>Filter Products</h2>
  <div class="filter-group">
    <h3>Price Range</h3>
    <input type="range" min="0" max="1000" value="500">
  </div>
  <div class="filter-group">
    <h3>Categories</h3>
    <input type="checkbox" id="electronics" name="category">
    <label for="electronics">Electronics</label>
    <input type="checkbox" id="clothing" name="category">
    <label for="clothing">Clothing</label>
  </div>
</search>
```

<div class="pt-2" />

### When to Use `<search>`

The search element might seem straightforward, but knowing when to use it improves its effectiveness:

```html
<!-- Good: Global site search -->
<search>
  <form>
    <input type="search" placeholder="Search entire site">
  </form>
</search>

<!-- Good: Product filtering -->
<search>
  <form>
    <fieldset>
      <legend>Filter by price</legend>
      <input type="range">
    </fieldset>
  </form>
</search>

<!-- Not ideal: Simple text input -->
<input type="text" placeholder="Enter your name">
```

The search element isn't meant for every input field. It's specifically for search and filtering interfaces where users can look up or narrow down content.

The `<search>` element represents a dedicated section for search functionality - but with an important caveat. While it's perfect for search inputs and instant results like autocomplete, it shouldn't be used for full search results pages.

```html
<!-- Good: Search input with quick suggestions -->
<search>
  <form>
    <input type="search">
    <ul class="suggestions">
      <li><a href="/doc1">Quick result 1</a></li>
      <li><a href="/doc2">Quick result 2</a></li>
    </ul>
  </form>
</search>

<!-- Not appropriate: Full search results page -->
<search> <!-- Don't do this -->
  <h1>Search Results for "query"</h1>
  <div class="results">
    <!-- Full page of results -->
  </div>
</search>
```

Full search results belong in the main content area of your page, typically within `<main>` or `<article>` elements. The `<search>` element is for the search interface itself - inputs, filters, and immediate feedback like autocomplete suggestions.