検索機能を表す

search要素は、検索機能に関連するコンテンツを表します。

search要素を使用することで、文書やアプリケーションにおける検索機能の範囲を表すことができます。この要素内には、次のようなコンテンツを含めることができます。

• 検索や絞り込みに関連する一連のフォーム部品
• 検索や絞り込みに関連する文書の一部、またはアプリケーションの一部
• 検索機能に含まれるサジェストやリンク

逆に、次のようなコンテンツにsearch要素を使用するのは適切ではありません。

• 検索結果を表示するだけのコンテンツ

次の例では、サイト内検索用のフォームをheader要素内に配置しています。

<header>

<h1><img src="logo.png" alt="TAG index"></h1>

<search>
<form action="search.php">
<input type="search" name="q">
<input type="submit" value="検索">
</form>
</search>

</header>

次の例では、検索を目的とするセクションをsearch要素でマークアップしています。

<search>

<section>

<h2>商品検索</h2>

<p>価格帯を選択してください。</p>

<form action="search.php">

<ul>
<li><label><input type="radio" name="price" value="1">1,000円以内</label></li>
<li><label><input type="radio" name="price" value="2">1,000 - 2,000円</label></li>
<li><label><input type="radio" name="price" value="3">2,000 - 5,000円</label></li>
<li><label><input type="radio" name="price" value="3">5,000 - 10,000円</label></li>
<li><label><input type="radio" name="price" value="4">10,000円以上</label></li>
</ul>

<p><input type="submit" value="探す"></p>

</form>

</section>

</search>

次の例では、JavaScriptを使った検索機能をsearch要素でマークアップしています（スクリプトは省略）。このような場合は、検索結果となるコンテンツをsearch要素内に含めることができます（検索機能の一部とみなされるため）。

<search>

<section>

<h2>会員検索</h2>

<p>名前：<input type="search" id="query"></p>

<section>

<h3>検索結果</h3>

<ul id="results">
<li>山田太郎 <a href="member/yamada_taro.html">プロフィール</a></li>
<li>鈴木花子 <a href="member/suzuki_hanako.html">プロフィール</a></li>
<li>佐藤一郎 <a href="member/sato_ichiro.html">プロフィール</a></li>
・
・
・
</ul>

<!-- 結果なしのメッセージをここに表示 -->
<output id="no-results"></output>

</section>

</section>

</search>

• 上記は、初期状態では会員の一覧を隠しておき、入力欄に打ち込まれた名前に一致する会員のみを検索結果に表示する、といった処理を想定しています。