HTML要素辞書 by Sentaro

<search>

検索領域要素。Webサイトまたはアプリケーション内の検索機能をグループ化するための最新のセマンティック要素です。

info

概要

<search> 要素は、**文書またはアプリケーション内の検索機能** を構成するコンテンツを囲むためのセクション要素です。
例えば、Webサイト全体の検索フォーム、特定の領域（記事一覧など）の検索フィルター、ECサイトの商品検索フォームなどに使用されます。
この要素を使用することで、支援技術（スクリーンリーダーなど）や検索エンジンに対して、そのコンテンツが検索機能であることを明示的に伝えることができます。

play_circle

デモ (静的表示)

HTML (Source)

<search> <form action="/search" method="get"> <label for="site-search">サイト内検索:</label> <input type="search" id="site-search" name="q" placeholder="キーワードを入力"> <button type="submit">検索</button> </form> </search>

Preview (Result)

list

属性 (Attributes)

属性名	説明
グローバル属性	全てのHTML要素に共通する属性（`id`, `class`, `style`など）のみ使用可能です。 `<search>` 要素固有の属性はありません。

code

実用例

1. メインのサイト検索フォーム

<header>
 <nav>...</nav>
 <search>
  <form role="search" action="/search" method="get">
   <input type="search" name="q">
   <button type="submit">検索</button>
  </form>
 </search>
</header>

2. 特定セクション内の検索・フィルタリング

<section>
 <h2>記事一覧</h2>
 <search>
  <form action="/articles" method="get">
   <label for="article-filter">記事を絞り込む:</label>
   <input type="text" id="article-filter" name="filter">
   <button type="submit">適用</button>
  </form>
 </search>
 <ul>...記事リスト...</ul>
</section>

lightbulb

知っておくべき重要事項

tips_and_updates

セマンティクス（意味）の向上
以前は検索フォームを <div> や <form> でマークアップし、WAI-ARIAの role="search" を追加するのが一般的でした。<search> 要素は、その役割をHTML標準で提供するものであり、**より簡潔でセマンティックなマークアップ** を可能にします。

accessibility_new

WAI-ARIA role="search" との関係
<search> 要素は、自動的に role="search" と同じセマンティクスを持ちます。そのため、通常は明示的に role="search" を記述する必要はありません。ただし、ブラウザの対応状況を考慮し、もし検索フォームが <form> 要素を囲む場合、冗長ですが <form role="search"> のように指定することも考えられます（上記の例1）。

私について利用規約プライバシーポリシー