【2026年8月最新】HTMLの<header>タグとは？書き方・使い方からSEO・アクセシビリティまで完全ガイド
aikanri-admin
この記事の内容
「ヘッダーを作るとき、なんとなく<div class="header">で組んでいる」——そんな経験はないでしょうか。HTML5には、ページの先頭部分を意味的に示す専用のタグとして<header>が用意されています。
<div>で組んでも見た目はまったく同じように作れてしまうため、「結局どちらを使っても同じでは？」と感じる方も多いはずです。しかし<header>タグには、見た目には現れない「意味」の違いがあり、これがSEOやアクセシビリティに実際に影響します。
この記事では、<header>タグの基本的な役割・書き方から、<div>との違い、ヘッダー内に配置すべき要素、ページ全体とセクション単位での使い分け、SEO・アクセシビリティへの効果、用途別のサンプルコードまでを体系的に整理します。さらに後半では、レスポンシブ対応のヘッダー実装をClaude CodeのようなAIコーディングエージェントにどう任せられるかという実務的な視点も紹介します。
AI鬼管理山崎
代表菅澤
この記事を最後まで読むと、次の6つが明確になります。
01 HEADER BASICS <header>タグとは？基本の役割 「ここからが導入部分です」という意味の目印
<header>タグは、HTML5で導入されたセマンティック要素の1つで、ページ全体やセクションの「導入部分・案内部分」であることを示すタグです。
📚 用語解説
セマンティック要素：HTML5で追加された、タグそのものが「意味」を持つ要素の総称。<header>・<nav>・<main>・<footer>・<article>・<section>などが該当する。見た目を変える力はなく、あくまで「この部分が何を表しているか」をブラウザや検索エンジン、支援技術に伝えるための仕組み。
ポイントは、<header>タグ自体にはデザインを変える力が一切ないという点です。ブラウザの標準スタイルでも、<header>タグを使ったからといって特別な見た目にはなりません。あくまで「ここからがページ（またはセクション）の導入部分ですよ」という意味的な目印を付ける役割に徹しています。
1-1. <header>タグが果たす3つの役割
代表菅澤
02 BASIC SYNTAX <header>タグの基本の書き方 サイト全体のヘッダーを組む最小構成
最も基本的な<header>タグの使い方は、サイトのロゴやサイト名、グローバルナビゲーションをまとめて囲む形です。
<header>
<h1>サイト名・ロゴ</h1>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社情報</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
</header>このように、<header>の中に見出し（h1〜h6のいずれか）とナビゲーション（<nav>）を格納するのが基本形です。<header>タグは<body>直下だけでなく、<article>や<section>の中にも自由に配置できる点が大きな特徴です。
見出し要素はよく一緒に使われますが、必須ではありません。ロゴ画像だけ、検索フォームだけを格納した<header>も文法上は問題ありません。「導入・案内に関する要素をまとめる箱」というくらいの柔軟な理解で問題ありません。
2-1. CSSでスタイルを当てる
<header>タグ自体は見た目を変えませんが、CSSでスタイルを当てることは通常のタグと同様に可能です。
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
background-color: #1a1a1a;
color: #fff;
}03 VS DIV <div>との違い・セマンティックに書くべき理由 見た目が同じでも「意味」が変わると何が起きるのか
<header>タグと<div class="header">は、CSSで同じスタイルを当てれば見た目上はまったく区別がつきません。では、なぜわざわざ<header>タグを使うべきなのでしょうか。
| 観点 | <div class="header"> | <header>タグ |
|---|---|---|
| 見た目 | CSS次第でどちらも同じ表示が可能 | CSS次第でどちらも同じ表示が可能 |
| 意味の伝達 | ブラウザ・検索エンジンには「ただの箱」としか伝わらない | 「ページ・セクションの導入部分」として明示的に伝わる |
| スクリーンリーダーでの扱い | 通常のコンテナとして読み上げられる（スキップしづらい） | body直下ならランドマークとして認識され、読み上げをスキップしやすい |
| コードの可読性 | クラス名に依存する（class名の付け方次第） | タグ名自体が意味を表すため一目で分かる |
📚 用語解説
ランドマーク：スクリーンリーダー等の支援技術が「ページの主要な区画」として認識する仕組み。<header>・<nav>・<main>・<footer>などのセマンティック要素を使うと自動的にランドマークとして認識され、ユーザーが「ヘッダーへジャンプ」「メインコンテンツへジャンプ」といった移動をしやすくなる。
この違いが最も分かりやすく現れるのが、視覚障害を持つユーザーがスクリーンリーダーでサイトを利用する場面です。body直下に置かれた<header>タグはランドマーク（banner）として認識されるため、ユーザーはショートカット操作で「ヘッダーへ」「本文へ」と素早く移動できます（article・section内のheaderはランドマーク扱いにはなりません）。<div>だけで組んだヘッダーでは、この移動ができず、ページの先頭から順番に読み上げを聞き続けるしかありません。
デザイン確認では<div>と<header>の違いに誰も気づきません。しかし検索エンジンのクローラーやスクリーンリーダーは、この意味の違いを明確に読み取っています。見た目のチェックだけでコードレビューを終わらせると、この差は永遠に見過ごされます。
代表菅澤
04 INSIDE HEADER ヘッダー内に配置する主なタグ・要素 headerタグの中に何を入れるべきかを整理する
<header>タグの中には、ページの「導入・案内」に関わる要素を自由に配置できます。実務でよく使われる代表的な要素を整理します。
| 要素 | タグ・記法の例 | 役割 |
|---|---|---|
| サイトタイトル・ロゴ | <h1>やロゴ画像の<img> | サイト・ページの名前を示す |
| グローバルナビゲーション | <nav> | 主要ページへの導線をまとめる |
| 検索フォーム | <form role="search"> | サイト内検索の入口を提供する |
| SNS・お問い合わせ導線 | <a>やアイコンボタン | 外部連携・コンバージョン導線 |
| パンくずリスト | <nav aria-label="breadcrumb"> | 現在位置を示す（ページ単位のheaderで使用） |
📚 用語解説
<nav>タグ：ページ内の主要なナビゲーション（リンクの集まり）であることを示すセマンティック要素。<header>の中に置かれることが多いが、フッターの補助的なリンク集など、主要でないリンクの塊には使わないのが基本ルール。
4-1. metaタグ・linkタグとの混同に注意
<head>タグの中に書く<meta>（ページ説明等）や<link rel="stylesheet">（CSS読み込み）は、この記事で扱う<header>タグとは全くの別物です。<head>は文書全体のメタ情報を格納する要素、<header>は<body>内に表示される「見た目上のヘッダー」を作るための要素という違いがあります。名前が似ているため、初学者が混同しやすいポイントです。
<head>はページに表示されない設定情報（タイトル・文字コード・CSS読み込み等）をまとめる要素で、<body>の外側（前）に1つだけ書きます。一方<header>は<body>の中に書く、実際に画面に表示される要素です。スペルも似ているため注意してください。
AI鬼管理山崎
05 MULTIPLE HEADERS ページ全体のheaderとセクション単位のheaderの違い 1ページに複数のheaderタグを置いてもいいのか
よくある疑問として、「<header>タグは1ページに1つしか使えないのでは？」というものがあります。結論としては、1ページに複数の<header>タグを使うことができます。
ポイントは、<header>が「直近の親であるセクション（<body>・<article>・<section>）の導入部分」を示す仕組みだという点です。<body>直下に置けばページ全体のヘッダーになり、<article>の中に置けばその記事だけのヘッダーになります。
<body>
<header>
<!-- ページ全体のヘッダー（サイトロゴ・グローバルナビ） -->
</header>
<main>
<article>
<header>
<!-- この記事だけのヘッダー（記事タイトル・投稿日） -->
<h1>記事タイトル</h1>
<p>投稿日: 2026年8月8日</p>
</header>
<p>記事本文...</p>
</article>
</main>
</body>📚 用語解説
<article>タグ：それ単体で完結したコンテンツ（記事・投稿・コメント等）を示すセマンティック要素。ブログ記事やニュース記事の1本ごとに使われることが多く、<article>の中に専用の<header>や<footer>を持たせることができる。
このように、ページ全体のheaderと、記事・セクション単位のheaderは別の役割として共存できます。ブログサイトであれば「サイト全体のヘッダー」と「各記事のヘッダー（タイトル・投稿日・著者情報）」を両方<header>タグで表現するのが、正しいセマンティックな設計です。
header
ページ全体の
ヘッダー
header
記事単位の
タイトル・日付
header
セクション単位の
見出しブロック
<header>を置く場所に迷ったら、「今、自分は誰（どの親要素）の導入部分を作っているのか」を考えてください。ページ全体ならbody直下、その記事だけの情報ならarticle内、というように、直近の親に対する「顔」の役割だと捉えると判断しやすくなります。
代表菅澤
06 SEO & A11Y SEO・アクセシビリティへの効果 意味づけが検索エンジンとユーザー体験にどう効くか
6-1. SEOへの効果
検索エンジンのクローラーは、<header>や<nav>といったセマンティック要素を手がかりに「ページのどこが本文で、どこが導入・ナビゲーションなのか」を判別しています。<div>だけで組まれたページより、セマンティック要素で構造化されたページの方が、クローラーがコンテンツの重要度を判断しやすくなります。
セマンティックマークアップはSEOの「土台」を整える施策であり、これ単体で検索順位が直接的に大きく上昇するものではありません。「正しい構造にしておくことで、コンテンツの評価が正しく伝わりやすくなる」という間接的な効果として理解しておくのが実務的な捉え方です。
6-2. アクセシビリティへの効果
前章でも触れた通り、<header>タグはスクリーンリーダーのランドマーク機能と直結しています。視覚障害を持つユーザーが、ページ内を効率よく移動できるかどうかは、こうしたセマンティック要素の使用状況に大きく左右されます。
AI鬼管理山崎
07 SAMPLES 【用途別】headerタグのサンプルコード 実務でそのまま使える3パターン
7-1. 横並びのシンプルなヘッダー
<header class="site-header">
<img src="logo.svg" alt="サイトロゴ" class="logo">
<nav>
<ul class="nav-list">
<li><a href="/">ホーム</a></li>
<li><a href="/service">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<style>
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 32px;
}
.nav-list {
display: flex;
gap: 24px;
list-style: none;
}
</style>7-2. 背景画像付きのヒーローヘッダー
<header class="hero-header">
<h1>キャッチコピーをここに</h1>
<p>サブテキストの説明文</p>
</header>
<style>
.hero-header {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero.jpg');
background-size: cover;
background-position: center;
color: #fff;
padding: 120px 24px;
text-align: center;
}
</style>7-3. スクロール追従する固定ヘッダー
<header class="fixed-header">
<nav>...</nav>
</header>
<style>
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background-color: rgba(26,26,26,0.95);
}
</style>📚 用語解説
position: fixed：要素をブラウザの表示領域（ビューポート）に対して固定表示するCSSプロパティ。ページをスクロールしても画面上の同じ位置に留まり続けるため、常時表示したいヘッダーやCTAボタンによく使われる。
position: fixedを使ったヘッダーは、他の要素（モーダルやポップアップ等）と重なり順が競合しやすいポイントです。サイト全体でz-indexの管理ルール（ヘッダーはこの値、モーダルはこの値、というように階層を決めておく）を作っておくと、後から要素を追加したときのトラブルを防げます。
代表菅澤
08 COMMON MISTAKES 実務でよくある間違いパターン ここまでの内容を「事故のパターン集」として総整理
| 間違いパターン | 症状 | 対策 |
|---|---|---|
| <head>と<header>を混同する | CSSやJSの読み込み設定が意図した場所に反映されない | <head>は裏側の設定、<header>は表側の見た目、と役割を分けて覚える |
| <header>の中に本文コンテンツまで入れてしまう | セマンティックな意味が崩れ、SEO・アクセシビリティ上の恩恵が薄れる | <header>には導入・案内要素のみを入れ、本文は<main>や<article>に置く |
| 全てを<div>で組んでクラス名だけで区別する | クローラー・支援技術が構造を正しく認識できない | header/nav/main/footer等のセマンティック要素に置き換える |
| 1ページに複数headerを使うことに気づかず冗長なdivで代用する | コードが読みにくく、記事単位の情報がヘッダーとして認識されない | article・section内にも適切にheaderタグを使う |
| 固定ヘッダーのz-index管理をせず後から要素が隠れる | モーダルやポップアップがヘッダーの下に隠れる／逆に覆う | サイト全体でz-indexの階層ルールを事前に決めておく |
8-1. コードレビューで確認すべきチェックポイント
AI鬼管理山崎
09 AI CODING 【独自】ヘッダー実装・レスポンシブ調整をAIに任せる スマホ表示のズレ調整のような細部にこそAIが効く
ここまで紹介してきたヘッダーの実装は、PCとスマートフォンで見た目が崩れないよう調整する「レスポンシブ対応」で特に手間がかかる作業です。ナビゲーションをハンバーガーメニューに切り替える、ロゴのサイズを画面幅に応じて縮小する——こうした細部の調整は、Claude CodeのようなAIコーディングエージェントが力を発揮しやすい領域です。
📚 用語解説
Claude Code：Anthropicが提供するAIコーディングエージェント。「スマホ表示のときだけナビゲーションをハンバーガーメニューにして」といった自然な言葉の指示だけで、必要なHTML構造とCSS（メディアクエリ等）を判断してコードを生成・修正してくれる。
弊社（株式会社GENAI）では、自社サイトやLPのヘッダー実装にもClaude Codeを活用しています。「スマホだとロゴが大きすぎるから縮小して」「スクロールしたらヘッダーを少し透過させて」といった感覚的な指示でも、position・メディアクエリ・JavaScriptの必要な組み合わせを判断してコードに落とし込んでくれるため、実装〜微調整までの時間が大きく圧縮されます。
9-1. 非エンジニアがヘッダー実装に関わる意味
「HTMLのタグ名やCSSのプロパティなんて分からない」という経営者・マーケティング担当の方も多いはずです。しかし、サイトの第一印象を決めるヘッダーは、訪問者の離脱率やブランドイメージに直結する経営課題でもあります。「スマホで見たときにロゴが崩れている」「ナビゲーションが押しにくい」といった感覚的な違和感を、タグ名やプロパティ名を知らないままClaude Codeに直接伝えて試せるのは、非エンジニアにとって大きな価値です。
こうしたい」を伝える
感覚的な言葉でOK
HTML/CSSを生成
セマンティックな
構造も判断
両方で確認
崩れがないか
チェック
繰り返して完成
試行錯誤の
時間を大幅短縮
もちろん、ブランドイメージに関わる最終的なデザイン判断は人間が行うべき領域です。Claude Codeはあくまで「試行錯誤のスピードを上げる」アシスタントという位置づけであり、最終的な意思決定を代替するものではありません。弊社ではヘッダー・LP制作以外にも営業・広告・経理・秘書業務までClaude Codeを組み込んでおり、月額約30,000円（Max 20xプラン）の投資で、こうした細部の実装調整まで含めて業務を分担できている肌感があります。
代表菅澤
AI鬼管理山崎
ヘッダー実装も、Claude Codeの業務活用も、AI鬼管理が伴走します
「サイトの見た目を素早く改善したい」「開発・デザイン以外の業務にもAIを活かしたい」という経営者・マーケティング担当の方に向けて、Claude Codeの導入設計をサポートしています。
AI鬼管理山崎
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
AI活用を自社で回せるようになりたい方へ
AI鬼管理
Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。
よくある質問
Q. <header>タグは1ページに1つしか使えませんか？
A. 複数使うことができます。<header>は「直近の親要素（body・article・section等）の導入部分」を示す仕組みのため、ページ全体のヘッダーとは別に、記事やセクションごとに専用のheaderを設置できます。
Q. <header>タグと<div class="header">、見た目が同じなら違いはないのでは？
A. 見た目は同じでも「意味」が異なります。<header>タグはbody直下などページ全体のヘッダーであればスクリーンリーダーのランドマーク（banner）として認識されます（article・section内のheaderはランドマーク扱いにはなりません）。また、いずれの場合も検索エンジンにはページ構造の一部として伝わります。<div>では単なる箱としてしか扱われないため、アクセシビリティとSEOの土台の面で差が生まれます。
Q. <head>タグと<header>タグはどう違いますか？
A. <head>はページに表示されない設定情報（タイトル・文字コード・CSS読み込み等）をまとめる要素で、<body>の外側に1つだけ書きます。<header>は<body>の中に書く、実際に画面に表示されるヘッダー要素です。名前が似ていますが全くの別物です。
Q. <header>タグの中に何を入れてはいけませんか？
A. 本文コンテンツ（記事の主要な文章や情報）を<header>の中に入れるのは避けるべきです。<header>はあくまで導入・案内のための要素であり、本文は<main>や<article>側に配置するのがセマンティックに正しい構造です。
Q. <header>タグを使うだけで検索順位は上がりますか？
A. 直接的に順位が大きく上がるわけではありません。セマンティックマークアップはSEOの「土台」を整える施策であり、コンテンツの構造を検索エンジンに正しく伝えやすくする間接的な効果として理解するのが実務的です。
Q. ヘッダーのレスポンシブ実装をAIに任せることはできますか？
A. 可能です。Claude CodeのようなAIコーディングエージェントに「スマホ表示のときはメニューをハンバーガーアイコンにして」といった自然な言葉で依頼すると、必要なHTML構造とCSSのメディアクエリを判断して実装してくれます。専門用語を知らない非エンジニアでも活用しやすい方法です。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
Claude Code を業務に落とし込む
専門研修コース一覧
受講者本人の業務を題材に、「使いこなせる」状態になるまで伴走する研修プログラム。1対1特化型・ハンズオン・法人講座の3コースを展開中。業務特化・実装まで踏み込むタイプのClaude Code研修です。
研修コース一覧を見る →AI鬼管理へのお問い合わせ
この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
