search_element.md

🔎 <search> Element in HTML

The <search> element is a new semantic HTML element introduced to explicitly define a region intended for performing search queries. It enhances accessibility and improves semantic clarity for screen readers and other assistive technologies.

---

✅ Benefits

• Semantic Clarity: Indicates a dedicated search area without overloading <form> or <section> semantics.
• Accessibility: Exposes the region to screen readers and AT as a search landmark (when paired with ARIA).
• Improved SEO & Parsing: Allows parsers and crawlers to better understand search functionality.
• Non-replacement: It wraps search forms—it does not replace <form> or <input type="search">.

---

🌐 Browser Support

As of 2025, supported in Chromium-based browsers and Firefox 122+, with Safari support expected. Use semantic fallback if needed.

---

📦 Use Cases

• Site-wide or in-page scoped search widgets.
• Distinguishable search region in complex UIs.
• Multiple <search> regions allowed on a page (unlike <main> or <header>).

---

🧩 Example: Basic Search UI

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

---

🖼️ Canvas Use Case

Static SPA with <search> in Canvas Area

<main>
  <section>
    <h1>Document Library</h1>

    <search>
      <form role="search">
        <label for="doc-search">Find a Document</label>
        <input type="search" id="doc-search" name="query" />
        <button type="submit">Search</button>
      </form>
    </search>

    <ul id="results">
      <li>Annual Report 2024</li>
      <li>Financial Summary Q1</li>
    </ul>
  </section>
</main>

---

🧑‍🦯 Accessibility Notes

• Use role="search" inside <form> to provide landmark exposure.
• Always label the <input type="search">.
• If multiple <search> elements exist, use aria-label to distinguish them:

<search aria-label="Site Search"> ... </search>

---

🎯 Summary

• Use <search> to define search UI areas semantically.
• Pair with <form>, <input type="search">, and ARIA for full accessibility.
• Works seamlessly in static or SPA canvas layouts.

---

📚 References

• WHATWG Spec: <search>
• MDN Docs