この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: header要素
SEOタイトル: HTML header 要素の使い方（セクションのヘッダー / 複数配置 / nav header との関係）

この記事の要点
  • はもっとも近いセクションのヘッダー部分を表す HTML5 のセクショニング関連要素
  • 最も近いセクショニング要素が body ならページ全体のヘッダーになる
  • ページ内に複数配置できる（article ごと、section ごとに置ける）
  • 中身にはロゴ / 見出し / ナビ / 検索フォーム / 著者情報などを入れることが多い
  • の中に別の
    や
    を入れることはできない

header 要素とは

は HTML5 で導入されたセマンティック要素で、もっとも近いセクション（article / section / aside / nav / body）のヘッダー領域を表します。最も近いセクショニング要素が body の場合はページ全体のヘッダーとして機能します。

基本構文


  
サイト名

  
キャッチコピー

header に入れる典型的なコンテンツ

  • サイトロゴ / サイト名（多くの場合

    ）

  • キャッチコピー / リード文
  • ナビゲーション（
  • 検索フォーム
  • 著者情報 / 公開日（記事の場合）
  • パンくずリスト

複数配置パターン

HTML5 では 1 ページに複数の

を置けます。それぞれの最寄りのセクショニング要素に従属します。


  
            
    
技術ブログ

    
  


  

    

      
        
        
HTML5 セマンティック要素まとめ

        
公開日: 2026-06-11 / 著者: Alice

      

      
本文...

      
        
        
タグ: HTML, Web

制約事項

  • 内に別の
    を入れ子にすることはできない
  • 内に
    を入れることもできない
  • 自体はセクショニング要素ではないため、独自のアウトラインを作らない

div との違い

項目
意味ヘッダーであることを明示意味なし（汎用コンテナ）
支援技術（スクリーンリーダー）「バナー」「ヘッダー」として読み上げ単なるグループ
SEO / アクセシビリティ有利中立
CSS / JS から要素セレクタで指定可クラス指定が必要

アクセシビリティ

body 直下の

は ARIA の role="banner" 相当として扱われ、スクリーンリーダーで「バナー」ランドマークとして認識されます。ページ全体のヘッダーは 1 つに絞るのがベストプラクティスです。

関連要素

要素役割
セクションのヘッダー
セクションのフッター
主要なナビゲーション
ページの主要コンテンツ（1 ページに 1 つ）
独立した記事 / 投稿
意味のあるまとまり
補足情報 / サイドバー

FAQ

Q: ヘッダー画像（hero）はどこに入れる？
A: ページ全体の印象を作る hero は

に含めるのが自然。ただし装飾だけなら CSS の背景画像にしても良い。

Q: h1 は

の中に入れるべき？
A: 必須ではないが、セマンティクス上は外より中のほうがすっきりする。ページの主見出しは main 側に置く流派もある。

Q: スクロール追従の固定ヘッダーは？
A:

要素に position: sticky; top: 0; を適用するだけ。意味づけと表示は別レイヤなので問題ない。

関連記事