検索結果のフィルタリングに使えるHTML5タグは？header要素の正しい使い方

検索結果のフィルタリングに適したHTML5タグ

検索結果をフィルタリング（絞り込み）するためには、HTML5の<header>要素を使用するのが適切です。<header>要素は、そのセクションの導入部分や補助的なナビゲーションを表す要素であり、検索条件や絞り込みオプションといった操作UIを配置するのに理想的な場所です。

具体的には、検索結果エリア全体を囲む<section>要素の内部に<header>要素を配置し、その中にフィルター用の部品を記述します。

コード例

以下は、検索結果ページで<header>要素を使ってフィルターを配置する例です。

<section id="results">
  <h1>Search results</h1>
  <header id="search-filters">
    <!-- filters -->
  </header>

  <article>
    <!-- search result 1 -->
  </article>

  <article>
    <!-- search result 2 -->
  </article>

  <article>
    <!-- search result 3 -->
  </article>

  <article>
    <!-- search result 4 -->
  </article>
</section>

構成要素のポイント

• <section>：検索結果エリア全体をひとつの意味的なまとまりとして定義します。
• <header>：セクションの先頭に配置し、フィルターや並べ替えなどの操作UIを格納します。
• <article>：個々の検索結果を独立したコンテンツとしてマークアップします。

このようにセマンティックなHTML5要素を正しく使い分けることで、文書構造が明確になり、スクリーンリーダーなどの支援技術でも内容が理解しやすくなります。また、検索エンジンがページ構造を把握しやすくなるため、SEOの面でもメリットがあります。