search 要素

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

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

<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>