HTML <search> 搜尋區塊標籤

<search> 是 HTML5 標準中最新加入的語義化標籤之一（於 2023 年正式普及）。它專門用來定義網頁中的「搜尋」或「篩選」功能區塊。

在 <search> 標籤出現之前，我們通常使用 <section role="search"> 或無語義的 <div> 來包覆搜尋表單。現在，透過專門的 <search> 標籤，我們可以讓網頁結構更加清晰且對輔助技術（如螢幕閱讀器）更友好。

<search> 的基本用法

要把搜尋功能標示為 <search> 區塊，只需要將 表單 (form) 及其相關元件包在裡面即可：

<header>
  <h1>我的部落格</h1>
  <search>
    <form action="/search">
      <label for="q">搜尋文章：</label>
      <input type="search" id="q" name="q" placeholder="請輸入關鍵字..." />
      <button>送出</button>
    </form>
  </search>
</header>

雖然使用 <div> 看起來效果一樣，但使用 <search> 具有以下優點：

  1. 增強無障礙 (Accessibility)：瀏覽器與螢幕閱讀器會自動將此區塊識別為一個 search 標記區分點 (landmark)，讓視障使用者能快速跳轉到搜尋功能。
  2. 語義更明確：開發者不需要手動添加 role="search" 屬性，標籤本身就承擔了這個語義。
  3. 區分內容與工具：它能明確區隔出「這是一個用來尋找內容的工具」，而不是文章內容本身。
  • 全站搜尋：網站頂端的搜尋列。
  • 頁面內過濾：例如電子商務網站側邊欄的商品篩選功能。
  • 資料庫查詢介面：用於查詢特定記錄的介面。
<search> 標籤本身並不提供搜尋邏輯（那仍是由 JavaScript 或後端程式處理），它僅僅是用來標示功能的語義容器。

瀏覽器支援度

截止至 2024 年，所有主流瀏覽器的最新版本（Chrome 118+, Firefox 118+, Safari 17+）皆已支援 <search> 標籤。對於較舊的瀏覽器，該標籤會被視為普通的 <div> 處理，不會破壞原有佈局。

為了最佳的相容性，你也可以暫時同時使用標籤與 role 屬性（雖然未來將不再需要）：

<search role="search">
  <!-- 搜尋內容 -->
</search>

總結

使用 <search> 是現代網頁開發邁向「深度語義化」的一小步。雖然它很簡單，但卻能讓你的 HTML 文件更加專業且符合無障礙標準。