トップページ
> HTML Living Standard
> <search>
★HTML Living Standard リファレンス
<search> …… 検索やフィルタリング機能を表す
広告
<search>タグは、検索やフィルタリング機能を表す際に使用します。
form要素やそれに関連するフォーム部品など、 検索やフィルタリングを操作する部分をsearch要素としてマークアップします。
検索結果だけをsearch要素としてマークアップするのは不適切です。 検索した結果を表示するページにおいて、検索結果はページのメインコンテンツかもしれません。 このような場合には、main要素としてマークアップするのがふさわしいでしょう。
一方で、検索ワードのサジェスチョン表示や、検索結果のサジェスチョン表示などは検索機能の一部です。 このような場合には、search要素としてマークアップするのがふさわしいでしょう。
■使用例
以下のサンプルは、header要素内にsearch要素を含めています。
HTMLソース
<header>
<h1><a href="/">マイブログ</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><a href="services/consulting">専門相談サービス</a></p>
<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>↓↓↓
ブラウザ上の表示
現在地周辺のホテル
条件でホテルを絞り込む
...広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
© HTMQ