HTML Tag Reference

search 要素

検索に関連する入力コントロールやコンテンツをまとめる

search 要素は、検索、あるいはフィルタリングなどの操作を実行するための入力コントロールや関連コンテンツのまとまりを表します。例えば、Webサイトに設置する「サイト内検索」のフォームなどが該当するでしょう。

なお、検索結果を表示するためだけに search 要素を使用することは適切ではありません(検索結果自体はその Web ページの主要なコンテンツの一部として表示されるべきでしょう)。しかし、「クイックサーチ」 結果としての提案(サジェスト)やリンクを検索機能の一部として含めることはできます。

search 要素の仕様

コンテンツモデル
この要素を使用できる文脈
  • フロー・コンテンツが期待される場所
この要素で使用できる属性

search 要素のサンプルソース

<search>
  <form action="search/" method="get">
    <fieldset>
      <legend>サイト内検索</legend>
      <label for="query">検索キーワード</label>
      <input id="query" name="q" type="search" placeholder="検索キーワードを入力" required>
      <button type="submit">検索</button>
    </fieldset>
  </form>
</search>
<!-- JavaScript のみで検索機能を実装する場合は下記のようなマークアップも想定されます -->
<search>
  <label for="query">検索キーワード</label>
  <input id="query" type="search" placeholder="検索キーワードを入力">
  <button>検索</button>
</search>
<!-- 主要コンテンツと検索機能が明確に分かれている場合は結果も含めて search 要素内に入れることも想定されます -->
<search>
  <div id="search">
    <label for="query">記事を検索</label>
    <input id="query" type="search" placeholder="検索キーワードを入力">
    <button>検索</button>
  <div>
  <section>
    <h3>検索結果</h3>
    <p>3件の記事が見つかりました。</p>
    <!-- ここに簡易な検索結果などを表示 -->
  </section>
</search>
<main>
  <!-- 検索結果をクリックするとここに本文を表示するなど -->
</main>

主要ブラウザの対応

IE11 ×
Edge(EdgeHTML) ×
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。