<search>タグは、検索やフィルタリング機能を表す際に使用します。
search要素は、検索やフィルタリングを操作する部分をマークアップします。
具体的には、form要素やそれに関連するフォーム部品などが、
search要素としてマークアップするのにふさわしいでしょう。
検索結果のみをsearch要素としてマークアップするのは不適切です。
検索結果を表示するページにおいて、検索結果はページのメインコンテンツかもしれません。
このような場合には、main要素としてマークアップするのがふさわしいでしょう。
一方で、検索ワードのサジェスチョン表示や、検索結果のサジェスチョン表示などは検索機能の一部です。
このような場合には、search要素としてマークアップするのがふさわしいでしょう。
■使用例
以下のサンプルは、検索機能をsearch要素でマークアップしています。
search要素は文書のヘッダーに配置されることが多いですが、
以下のサンプルではheader要素内にsearch要素を含めています。
HTMLソース
<header>
<h1><a href="https://htmqcom1.wpengine.com/tech/htmls//">マイブログ</a></h1>
...
<search>
<form action="search.php">
<label for="query">記事を探す</label>
<input id="query" name="q" type="search">
<button type="submit">検索</button>
</form>
</search>
</header>ブラウザ上の表示
マイブログ
…
■使用例
以下のサンプルは、ウェブアプリケーションの検索機能をJavaScriptで実装しているという想定です。
検索機能で一般的に用いられるform要素などはありませんが、
search要素でマークアップすることで、その子孫コンテンツが検索機能であることを表しています。
HTMLソース
<search>
<label>
キーワードによるフィルタリング：
<input type="search" id="query">
</label>
<label>
<input type="checkbox" id="exact-only">
完全一致のみ
</label>
<section>
<h3>見つかった結果:</h3>
<ul id="results">
<li>
<p>専門相談員に個別相談できるサービスです。</p>
</li>
...
</ul>
<!--
フィルタリング結果が全レコードまたは0件の場合
以下に「結果なし」のメッセージを表示する
-->
<output id="no-results"></output>
</section>
</search>ブラウザ上の表示
■使用例
以下のサンプルには、２つの検索機能があります。
１つ目はインターネット上をウェブ検索する機能、
２つ目はこのサービス内のコンテンツを検索するフィルタリング機能です。
どちらもsearch要素でマークアップしています。
HTMLソース
<body>
<header>
...
<search title="ウェブ検索">
...
</search>
</header>
<main>
<h1>現在地周辺のホテル</h1>
<search>
<h2>条件でホテルを絞り込む</h2>
...
</search>
<article>
<!-- 検索結果の表示 -->
</article>
</main>
</body>ブラウザ上の表示
…
現在地周辺のホテル
条件でホテルを絞り込む
…