HTML Tags

HTML <search> Tag

Written by Swapnil RajaPublished 30 Jul 2026

Learn how the HTML <search> tag semantically identifies controls and content used for searching or filtering.

The <search> tag represents a part of a document or application used for searching or filtering.
It is a semantic container for form controls or other search-related content and creates a search landmark for assistive technologies.

Syntax

html

<search>
  <form action="/search">
    <label for="query">Search:</label>
    <input type="search" id="query" name="q">
    <button type="submit">Search</button>
  </form>
</search>

Attributes

Attribute	Description
class	Specifies one or more class names for CSS styling.
id	Defines a unique identifier for the element.
style	Adds inline CSS styles.
title	Provides additional information as a tooltip when hovered.
aria-label	Provides an accessible name when multiple search landmarks exist.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Search Tag Example</title>
  <style>
    search {
      display: block;
      max-width: 520px;
      padding: 20px;
      border: 1px solid #d7e2e5;
      border-radius: 10px;
      background-color: #f7fbfc;
    }

    search form {
      display: flex;
      align-items: end;
      gap: 10px;
    }

    search label {
      display: grid;
      flex: 1;
      gap: 6px;
      font-weight: bold;
    }

    search input,
    search button {
      padding: 10px 12px;
      border-radius: 6px;
    }

    search input {
      border: 1px solid #9fb2b8;
    }

    search button {
      border: 0;
      background-color: #29AB87;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Search Our Tutorials</h1>

  <search aria-label="Tutorial search">
    <form action="/search">
      <label for="tutorial-query">
        Search tutorials
        <input
          type="search"
          id="tutorial-query"
          name="q"
          placeholder="Enter HTML, CSS, or JavaScript"
        >
      </label>
      <button type="submit">Search</button>
    </form>
  </search>
</body>
</html>

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	No

The <search> element has been supported across major modern browsers since October 2023. Internet Explorer does not support its search-landmark semantics.

Notes

Use <search> to contain controls or content related to a search or filtering operation.
The element identifies search semantics; it does not perform the search by itself.
A <search> can contain a <form>, but a form is not required for JavaScript-based filtering.
Do not use <search> as the main container for search results. Results should normally remain in the page's main content.
The element has an implicit search landmark role, so adding role="search" is unnecessary in supporting browsers.
Use an accessible name such as aria-label when a page contains multiple search landmarks.
Do not confuse <search> with <input type="search">; the element is a container, while the input accepts a query.
Both the opening and closing tags are required.

Conclusion

The <search> tag gives clear semantic meaning to search and filtering interfaces.
Use it around the controls for a site-wide search, page search, or filtering feature while keeping the resulting content in the main page area.

PreviousHTML <main> Tag NextHTML <details> Tag