<search>: 一般検索要素

Baseline 2023

Newly available

Since October 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

<search> は HTML の要素で、文書やアプリケーションのうち、検索や絞り込み操作を行うことに関連する、フォームコントロールやその他のコンテンツの部分を表すコンテナーです。<search> 要素は意味的に、要素の内容の目的が検索や絞り込み機能であることを示します。検索や絞り込み機能は、ウェブサイトやアプリケーション、現在のウェブページや文書、あるいはインターネット全体やそのサブセクションを対象とする可能性があります。

属性

この要素はグローバル属性のみを持ちます。

使用上の注意

<search> 要素は検索結果を表示するためのものではありません。むしろ、検索やフィルタリングの結果はそのウェブページのメインコンテンツの一部として存在するべきです。とはいえ、検索や 絞り込み機能の中の「クイック検索」機能の一部である提案やリンクは、検索機能なので <search> 要素のコンテンツの中で入れ子にするのが適切です。

例

ヘッダーの検索フォーム

この例では、単純なサイト全体の検索を行うために、ウェブサイトヘッダー内の検索のコンテナーとして <search> を使用する例を示します。<search> は <form> の意味づけコンテナーであり、ユーザーが入力した検索クエリーをサーバーへ送信します。

HTML

html
<header>
  <h1>動画のウェブサイト</h1>
  <search>
    <form action="./search/">
      <label for="movie">動画を検索</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">検索</button>
    </form>
  </search>
</header>

結果

ウェブアプリの検索

この例は、ウェブアプリケーションで JavaScript によって動的に行うの検索機能を実装する際の DOM コンテンツの可能性を示しています。検索機能がすべて JavaScript で実装された場合、フォームが送信されなければ <form> 要素も送信 <button> も必要ありません。意味づけのために、<search> 要素が検索と絞り込み機能を含めるために使用されています。

HTML

html
<search>
  <label>
    検索して絞り込み
    <input type="search" id="query" />
  </label>
  <label>
    <input type="checkbox" id="exact-only" />
    完全一致のみ
  </label>

  <section>
    <h3>結果:</h3>
    <ul id="results">
      <!-- 検索結果コンテンツ -->
    </ul>
    <output id="no-results">
      <!-- 結果のない時のコンテンツ -->
    </output>
  </section>
</search>

結果

メモ: JavaScript を使用していないユーザーもいること、そして JavaScript が正常にダウンロードされ、解釈され、実行されるまでは、どのユーザーも JavaScript を実行していないことを忘れずにしてください。ユーザーが JavaScript を無効にしていても、確実にサイトのコンテンツにアクセスできるように保証してください。

複数の検索

この例は、2 つの検索機能を持つページを示しています。最初の検索はヘッダー上のグローバルサイト検索です。2 つ目はページのコンテキストに基づいた検索とフィルターで、この例では車の検索です。

HTML

html
<body>
  <header>
    <h1>Car rental agency</h1>
    <search title="Website">...</search>
  </header>
  <main>
    <h2>Cars available for rent</h2>
    <search title="Cars">
      <h3>Filter results</h3>
      ...
    </search>
    <article>
      <!-- search result content -->
    </article>
  </main>
</body>

結果

技術的概要

コンテンツカテゴリー フローコンテンツ, 知覚可能コンテンツ.
許可されているコンテンツ フローコンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
暗黙の ARIA ロール search
許可されている ARIA ロール form, group, none, presentation, region, search
DOM インターフェイス HTMLElement

仕様書

Specification
HTML Standard
# the-search-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報