The search landmark in HTML

There is an element for the search area now; it used to be a div with a role.

<search>
  <form action="/snippets" method="get">
    <label for="term">Find a snippet</label>
    <input type="search" id="term" name="q">
    <label for="lang">Language</label>
    <select id="lang" name="lang">
      <option value="">Any</option>
      <option value="rust">Rust</option>
    </select>
    <button>Filter</button>
  </form>
</search>

How it works

<search> marks the search and filter controls of a page or section.
It maps to the search landmark, so it is reachable by that name.
Use it around the form, not instead of the form.

The run, in numbers

Lines: 12
Characters to type: 312
Tokens: 97
Three-star pace: 70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 83 seconds.

Type this snippet

Step 6 of 7 in Page landmarks, step 6 of 23 in Semantics & metadata.

← Previous Next →