Français

<search>

Delimiting a search area, the landmark that <form> doesn't create

— 1 min read

  • HTML
  • accessibility
  • semantics

<search> — The search landmark

The <search> element delimits a search area. It creates a landmark search that the screen reader announces and the user can jump to with a keyboard shortcut. A <form> alone does not create this landmark.

When to use it

You want to wrap a search form, a filter bar, or any mechanism that lets the user search for content within the site or the page.

What you gain

Accessibility: the screen reader announces "search" as a waypoint. The user jumps straight to the search area without traversing the entire page.

Code example

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

Further reading