HTML <search> element

The <search> element represents a part of the document or application used for searching or filtering. It is a container for search-related controls, links, instructions, or other search-supporting content.

The <input type="search"> element supplies a control for entering a search term. The surrounding <search> identifies the purpose of that region. It does not perform a search itself: a server or script supplies the search or filtering behaviour.

A <search> may contain a <form> for submitting a query, or controls that filter content directly with JavaScript. Instructions, category choices, and other content supporting the operation can also belong in the region. The search may apply to the current page, a site, or a wider collection.

The element identifies a search landmark, giving the region a purpose that a plain <div> does not express. Its use depends on the operation: a login or contact form is not a search region merely because it contains a text field.

A page of search results normally belongs in the document’s main content rather than being wrapped in <search> solely because it contains results. Suggestions or a small set of results integrated with the search controls can be part of the search feature.

The example filters two fruit names as you type. The script compares lowercase text and hides items that do not contain the entered text; clearing the input restores both items. If neither item matches, a short message appears. No form submission is needed for this local filter.

Attributes: GLOBALS.

Typical layout:
<search>
  <label for="fruit-filter">Filter fruit</label>
  <input id="fruit-filter" type="search">
  <ul id="fruit-list"><li>Apple</li><li>Pear</li></ul>
  <p id="fruit-empty" role="status" hidden>No matches.</p>
</search>
<script>
  const filter = document.getElementById("fruit-filter");
  const fruits = document.querySelectorAll("#fruit-list li");
  filter.addEventListener("input", () => {
    const query = filter.value.trim().toLowerCase();
    let matches = 0;
    fruits.forEach(fruit => {
      fruit.hidden = !fruit.textContent.toLowerCase().includes(query);
      if (!fruit.hidden) matches++;
    });
    document.getElementById("fruit-empty").hidden = matches > 0;
  });
</script>

Visual representation: