検索フォームを <div> で囲んでいませんか。実は 2023 年ごろに主要ブラウザで対応した <search> という専用の要素があり、サイト内検索やフィルタリングのまとまりを意味的に表せるようになりました。この記事では、<search> がどんな要素なのか、<div> で囲む場合との違い、基本の書き方、フィルタリング UI での使い方、これまで手書きしていた role="search" との関係、そして名前が似ている <input type="search"> との違いや古いブラウザへの対応まで、順に解説します。
目次
search 要素とは何か
<search> は、検索や絞り込み（フィルタリング）に関わるフォームやコントロールをひとまとまりにするためのセマンティック要素です。サイト全体を対象にした検索窓や、ページ内の一覧を条件で絞り込む UI など、「探す・絞り込む」ための部品を囲む入れ物として使います。ここで大切なのは、<search> 自体は検索ボックスや入力欄を描画しないという点です。あくまでコンテナ（囲む箱）であり、実際の入力欄やボタンは中に <form> や <input> を置いて作ります。
<section> や <nav> がページの領域に意味を与えるのと同じように、<search> は「ここは検索のための領域ですよ」という意味をマークアップに与えます。見た目は変わりませんが、要素そのものが役割を持つことに価値があります。
div で囲む場合との違い
これまで検索フォームは <div class="search"> のように、意味を持たない <div> で囲むのが一般的でした。見た目のうえでは <div> でも <search> でも違いはありません。決定的に異なるのは、<search> には暗黙の ARIA ロールとして search が割り当てられている点です。
この search ロールは、支援技術（スクリーンリーダーなど）にとっての「ランドマーク」の 1 つです。ランドマークとは、ページ内の主要な領域を示す目印のことで、スクリーンリーダーの利用者はこれを手がかりにページ内を素早く移動できます。<search> で囲むと、その領域が「検索」というランドマークとして認識され、利用者は検索窓へ直接ジャンプできるようになります。一方、ただの <div> はロールを持たないため、スクリーンリーダーからは意味のない入れ物として扱われ、検索領域だと伝わりません。
検索フォームを囲む基本の書き方
もっとも基本的な使い方は、検索フォームを <search> で囲むことです。中身は今までどおり <form> と入力欄、送信ボタンで構成します。<search> を <div> の代わりに置くだけなので、書き換えは難しくありません。
<!-- 検索フォームを search 要素で囲む -->
<search>
<form action="/search">
<label for="q">サイト内を検索</label>
<input type="search" id="q" name="q">
<button type="submit">検索</button>
</form>
</search>
このように <search> の中に <form> を置くのが標準的な形です。<search> はフォームそのものではないので、送信先を指定する action や送信ボタンは、内側の <form> 側に書く点に注意してください。見た目はこれまでと同じでも、検索領域だという意味がマークアップに加わります。
フィルタリング UI を囲む使い方
<search> が表すのは、キーワードを送信する検索だけではありません。すでに表示されている一覧を条件で絞り込む「フィルタリング」の UI も、検索の一種として <search> で囲めます。たとえば商品一覧をカテゴリや価格帯で絞り込むコントロール群がこれにあたります。
<!-- 一覧を絞り込むフィルターも search で囲める -->
<search>
<h3>絞り込み</h3>
<label>
カテゴリ
<select name="category">
<option value="">すべて</option>
<option value="book">書籍</option>
<option value="music">音楽</option>
</select>
</label>
</search>
このケースでは、フォームを必ずしも伴いません。JavaScript で即座に一覧を絞り込むような UI であれば <form> を省き、<search> の中に <select> やチェックボックスなどのコントロールを直接置いても構いません。「検索・絞り込みのための操作部品をまとめる箱」として捉えると、使いどころが分かりやすくなります。
なお、<search> が表すのは検索を「行う」ための領域であって、検索結果を表示する領域ではありません。絞り込んだあとの一覧そのものは、<search> の外に置くのが適切です。
role=”search” を手書きしていた従来手法との関係
<search> が登場する前は、検索領域をランドマークとして認識させるために、<form> や <div> に role="search" を手書きするのが定番でした。次のような書き方を見たことがあるかもしれません。
<!-- 従来: form に role="search" を手書きしていた --> <form action="/search" role="search"> <input type="search" name="q"> <button type="submit">検索</button> </form>
<search> はこの role="search" を暗黙のうちに備えた要素です。つまり、<search> で囲めば role 属性を手で書かなくても同じランドマークが得られます。ネイティブの要素で意味を表せるなら、そちらを優先するのが HTML の基本方針です。新しく書くコードでは、role="search" を付けた <div> や <form> の代わりに <search> を使うとよいでしょう。両者の対応関係を整理すると次のようになります。
| 書き方 | 意味・役割 |
|---|---|
<div role="search"> | 従来手法。div にロールを手書きして検索ランドマークを付与していた。 |
<search> | 暗黙で search ロールを持つ要素。role を書かずに同じランドマークになる。 |
input type=”search” との違い
名前がよく似ているため混同されがちですが、<search> と <input type="search"> はまったく別のものです。<search> は検索領域を囲むコンテナ要素で、それ自体は入力欄を持ちません。一方 <input type="search"> は、実際にキーワードを打ち込む 1 つの入力欄（テキストフィールド）です。役割の階層が違うので、両者は競合せず、むしろ組み合わせて使います。
| 要素 | 役割 |
|---|---|
<search> | 検索・絞り込みのコントロールをまとめるコンテナ。入力欄は描画しない。 |
<input type="search"> | キーワードを入力するための 1 つの入力欄そのもの。 |
実際のマークアップでは、<search> という箱の中に <input type="search"> という入力欄を置く、という入れ子の関係になります。前掲の基本の書き方の例が、まさにその形です。「囲む要素」と「入力欄」という役割の違いを押さえておけば、どちらを使うか迷うことはありません。
ヘッダー内のサイト検索の例
実践的な例として、ページ上部のヘッダーにサイト内検索を置くケースを見てみます。ヘッダーには通常、ロゴやナビゲーションと並んで検索窓が置かれます。この検索窓を <search> で囲むと、ヘッダー内に「検索」というランドマークが生まれ、支援技術の利用者がそこへ直接移動できるようになります。
<header>
<a href="/">サイト名</a>
<nav>
<a href="/about">About</a>
<a href="/blog">Blog</a>
</nav>
<!-- ヘッダー内のサイト検索 -->
<search>
<form action="/search">
<label for="site-q">サイト内検索</label>
<input type="search" id="site-q" name="q">
<button type="submit">検索</button>
</form>
</search>
</header>
ナビゲーションを <nav> で、検索を <search> で表すことで、ヘッダー内の役割がマークアップだけで明確になります。<div> の羅列だったころに比べ、構造が意味的に読み取りやすくなるのが分かります。
対応状況と古いブラウザへのフォールバック
<search> は 2023 年に主要なブラウザ（Chrome、Edge、Firefox、Safari）が対応し、比較的新しく使えるようになった要素です。最近のブラウザであれば問題なく利用できますが、それ以前のバージョンでは <search> を認識できず、ランドマークとしての意味が伝わりません。とはいえ、未知の要素はただの汎用要素として扱われるため、レイアウトが崩れるといった不具合は起きません。あくまで「検索ランドマークとしての意味が付かない」だけです。
古い環境でも検索ランドマークを確実に伝えたい場合は、<search> に role="search" を明示的に併記するフォールバックが使えます。<search> に対応したブラウザでは暗黙のロールと同じなので冗長にはなりますが、対応していないブラウザでは書いた role が効いてランドマークが補われます。
<!-- 古いブラウザ向けに role="search" を併記する -->
<search role="search">
<form action="/search">
<input type="search" name="q">
<button type="submit">検索</button>
</form>
</search>
どこまで古い環境を支える必要があるかはプロジェクト次第です。対応ブラウザが十分に普及した今では <search> だけでよい場面も多いので、フォールバックを付けるかどうかは想定する利用者層に合わせて判断してください。
まとめ
<search> は、サイト内検索やフィルタリングのコントロールをまとめる、2023 年ごろに使えるようになったセマンティックなコンテナ要素です。<div> で囲む場合と見た目は同じでも、暗黙の search ロールを持つため、スクリーンリーダーから検索ランドマークとして認識される点が大きく異なります。検索フォームを囲む基本の使い方に加え、フォームを伴わないフィルタリング UI を囲むのにも使えます。これまで手書きしていた role="search" を要素そのものが備えているので、新規コードでは <search> を優先しましょう。入力欄そのものである <input type="search"> とは役割が別で、<search> という箱の中に入力欄を置く関係になります。古いブラウザを支えたいときは role="search" の併記でフォールバックできます。