検索したい（search）
<header>
<a href="/" class="logo">サイト名</a>
<search>
<form action="/search">
<label for="q">サイト内検索</label>
<input type="search" id="q" name="q">
<button type="submit">検索</button>
</form>
</search>
</header>
searchタグは、検索や絞り込みのためのフォームをまとめるタグです。
中にformタグやinputタグを入れて使います。
サイト内検索、ページ内の絞り込み、検索候補の表示などに使います。
検索結果には使わない
<search>
<!-- 検索フォームはここ -->
<form action="/search">...</form>
</search>
<main>
<!-- 検索結果はメインコンテンツとして表示する -->
<h1>「HTML」の検索結果</h1>
<ul>...</ul>
</main>
searchタグが表すのは「検索するための場所」であって、検索した結果ではありません。
検索結果の一覧は、そのページの中心的な内容なのでmainタグの中に置きます。
注釈
searchタグは、支援技術に「ここは検索の区画」と伝えるsearchランドマークになります。
以前は<form role="search">のようにrole属性で指定していましたが、
searchタグを使えばrole属性は不要です。
すべてのブラウザで2023年10月から使えるようになった、比較的新しいタグです。