HTML Standard 仕様に search 要素が追加された

HTML Standard 仕様に search 要素が追加されました。検索やフィルタリングなどの操作を実行するための入力コントロールや関連コンテンツをまとめることができます。

先週末 (3 月 24 日) ですが、HTML Standard 仕様に、新たに search 要素が追加されました。

search 要素は、検索やフィルタリングなどの操作を実行するための入力コントロールや関連コンテンツのまとまりを表します。要するに Web サイトに設置する 「サイト内検索」 のフォームですとか、Web アプリケーション内で情報を検索するための一連の UI なんかをマークアップするのに使用できる要素ということになります。

search 要素はまだ HTML Standard 仕様に追加されたばかりですので、各ブラウザのサポート待ちになると思いますが、実装が進めば、検索機能の存在をブラウザや支援技術に明示できるようになるでしょう。role="search" を置き換えていくことが可能になります。

ちなみに search 要素の仕様上の説明としては下記の通り。

The search element represents a part of a document or application that contains a set of form controls or other content related to performing a search or filtering operation. This could be a search of the web site or application; a way of searching or filtering search results on the current web page; or a global or Internet-wide search function.

4.4.15 The search element - HTML Standard より引用

『search 要素は、検索またはフィルタリング操作を実行するためのフォームコントロールまたは関連コンテンツのセットを含むドキュメントまたはアプリケーションの一部を表します。これは、Web サイトやアプリケーションの検索、現在の Web ページ上で検索結果を検索、あるいはフィルタリングする、グローバル、あるいはインターネット全体の検索機能などが含まれます。』

一般的な検索フォームなら form 要素、<input type="search"> などの入力コントロールに、検索実行ボタン、あるいは検索条件を指定したりするためのセレクトメニューやチェックボックス、ラジオボタンなどが含まれることが想定されますし、場合によっては、検索方法の簡易な説明テキストや、使い方を示したページへのリンクなどが含まれることがあるかもしれません。

さらに、注釈が下記。

It's not appropriate to use the search element just for presenting search results, though suggestions and links as part of "quick search" results can be included as part of a search feature. Rather, a returned web page of search results would instead be expected to be presented as part of the main content of that web page.

4.4.15 The search element - HTML Standard より引用

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

ちょっとわかりにくい書き方かもしれませんが、仕様書内のサンプルソースコードをみると、検索結果も含めて search 要素内に入れている例があるので、例えば Web ページ内で 「主要なコンテンツ」 と 「(検索結果も含めて) 検索機能を提供する部分」 が明確に分かれている場合などは、検索機能に関連する箇所を search 要素に入れるという選択肢はあると思います。

冒頭にも書きましたが、まだ仕様に追加されたばかりですので、現時点で急いで search 要素に変更する必要はないですが、例えばサイト内検索フォームで下記のようなマークアップがあれば、

<form role="search" 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>
  <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>

HTML のリファレンス書籍など書かせて頂いている立場からすると、要素追加は書籍の内容が古くなるので複雑な心境もあるんですが、改訂の機会があれば反映したいところです。個人で管理しているリファレンスサイトの方には追加しておきました。

関連エントリー

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?