HTML Search Element

The HTML <search> element identifies a section that contains search or filtering controls. It gives the controls a clear semantic purpose without requiring an extra ARIA role.

You can use <search> for a site search, product filter, page finder, map search, or any interface that helps users find or narrow content. It has been widely available across current browsers since October 2023.

HTML Search Element Syntax

The opening and closing tags are both required. The element accepts global HTML attributes and can contain normal flow content.

Example:

<search>
  <!-- Search controls belong inside the semantic container. -->
  <form action="/search">
    <label for="query">Search the website:</label>
    <input type="search" id="query" name="q">
    <button type="submit">Search</button>
  </form>
</search>

The <search> element supplies the search landmark. The nested form handles submission and sends the query to the server.

Search Element and Form Element

The two elements have different responsibilities. <search> describes the purpose of a region, while <form> groups controls that submit data.

Element Main purpose Required for submission
search Marks search or filtering content No
form Collects and submits controls Yes, for standard form submission

If JavaScript performs filtering directly on the page, you may use <search> without a form. If the browser must submit a request, place a form inside it.

Create a Site Search Form

Use a named search input so the submitted URL contains the visitor's query.

Example:

<search aria-label="Site search">
  <form action="/search" method="get">
    <label for="site-search">Search tutorials:</label>
    <input type="search" id="site-search" name="q" required>
    <button type="submit">Search</button>
  </form>
</search>

Entering css grid submits a URL such as /search?q=css+grid. The label remains visible, so users know what the field searches.

Create a Page Filter Without a Form

A client-side filter does not need to submit data. The search container can hold the controls while results stay in the main page content.

Example:

<search aria-label="Filter employees">
  <label for="employee-filter">Filter by name:</label>
  <input type="search" id="employee-filter">
</search>

<!-- Results are page content, not search controls. -->
<ul id="employee-results">
  <li>Aarav Singh</li>
  <li>Emma Clarke</li>
  <li>Noah Williams</li>
</ul>

The <search> element represents the controls, not the result list. Place substantial results in the main content unless they are themselves interactive search controls.

Use Multiple Search Regions

A page can contain more than one search landmark. Give each one an accessible name so assistive-technology users can distinguish them.

Example:

<search aria-label="Documentation search">
  <!-- Searches the complete documentation website. -->
  <input type="search" aria-label="Search documentation">
</search>

<search aria-label="API method filter">
  <!-- Filters methods on the current page only. -->
  <input type="search" aria-label="Filter API methods">
</search>

Prefer a visible <label> for each input. The aria-label on the search container names the landmark itself.

Build an Interactive Filter

This complete example filters a course list as the visitor types.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Search Element Example</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 650px; margin: 2rem auto; }
    search { display: block; padding: 1rem; background: #f2f6ff; }
    input { padding: .6rem; width: 70%; }
  </style>
</head>
<body>
  <h1>Course Directory</h1>

  <search aria-label="Filter courses">
    <label for="course-query">Find a course:</label>
    <input type="search" id="course-query" placeholder="Try CSS">
  </search>

  <ul id="course-list">
    <li>HTML Accessibility</li>
    <li>Modern CSS</li>
    <li>JavaScript Fundamentals</li>
    <li>Docker Basics</li>
  </ul>

  <script>
    const input = document.querySelector("#course-query");
    const courses = document.querySelectorAll("#course-list li");

    // Filter the visible list whenever the query changes.
    input.addEventListener("input", () => {
      const query = input.value.trim().toLowerCase();

      courses.forEach((course) => {
        course.hidden = !course.textContent.toLowerCase().includes(query);
      });
    });
  </script>
</body>
</html>

Style the Search Region

The search element behaves like a regular flow container. You can style it with element, class, or attribute selectors.

Example:

search.course-filter {
  /* Separate search controls from the results. */
  display: block;
  padding: 1rem;
  border: 1px solid #b9c7dd;
  border-radius: .5rem;
  background: #f6f8fc;
}

search.course-filter input[type="search"] {
  min-width: 16rem;
  padding: .6rem;
}

Search Element Accessibility

  • Use a visible label for every search input.
  • Name multiple search landmarks with aria-label or aria-labelledby.
  • Keep keyboard focus visible on inputs, filters, and buttons.
  • Announce dynamically changing result counts with a suitable <output> or live region.
  • Do not add role="search" because the element already has an implicit search role.

Example:

<search aria-labelledby="filter-heading">
  <h2 id="filter-heading">Filter available courses</h2>
  <label for="topic">Topic:</label>
  <input type="search" id="topic">
  <!-- JavaScript can update this count after filtering. -->
  <output id="result-count" aria-live="polite">12 courses</output>
</search>

Common Mistakes

  • Using <search> as a wrapper for search results instead of controls.
  • Nesting one form inside another form.
  • Removing labels and relying only on placeholder text.
  • Adding a redundant search role.
  • Using the element for unrelated navigation or general page actions.

Tip: Use <search> when the region's main purpose is finding or filtering. Use <nav>, <aside>, or a normal section when that better describes the content.

Conclusion

The HTML <search> element gives search and filtering controls a native semantic landmark. Combine it with a form for standard submission or use it alone for client-side filtering. Clear labels, named landmarks, and results placed outside the control region create a search experience that is easier to understand and navigate.

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram