HTML を学び始めると、headerタグ という名前を目にする機会が増えます。
名前から「ページの一番上に書くタグなのかな？」と思うかもしれませんが、headerタグ は単にページの上部を作るためのタグではありません。
Webページや記事などの導入部分を表す役割を持つタグで、ページの構造を分かりやすくするために使われます。
実際の Webサイト では、ロゴやサイト名、ナビゲーションメニューなどが配置されることが多く、HTML を学ぶうえで最初に覚えておきたい構造タグの一つです。
ここでは、headerタグ の意味や役割、どのような場所で使うのか、そして基本的な書き方を初心者向けにわかりやすく解説します。
まずは細かなルールを覚えることよりも、「headerタグは何のために使うタグなのか」という全体像を理解するところから始めましょう。
headerタグはどんな場所で使う？
「ヘッダー」という言葉を聞くと、「ページの一番上にある部分」をイメージする方が多いかもしれません。
実際に Webサイトでは、ロゴやメニューなどを配置するページ上部のエリアに headerタグ がよく使われています。
しかし、HTML の headerタグ は、ページ全体の一番上だけを表すタグではありません。
headerタグ は、あるまとまりの導入部分（最初に紹介する情報）を表すタグです。
そのため、ページ全体だけでなく、記事や各コンテンツの導入部分にも使用できます。
なお、headerタグ は article や section だけでなく、nav などの中でも、その内容の導入部分を表すために使われる場合があります。
ただし、初心者の方が最初からすべての使用場面を覚える必要はありません。
まずは、headerタグ が使われる代表的な場所として、以下の3つを理解しておきましょう。
① ページ全体の導入部分
最も一般的な使い方は、Webサイト全体の導入部分です。
ホームページでは、以下のような情報をまとめる場所として使用されます。
・サイト名
・ロゴ
・ナビゲーションメニュー
・ページタイトル
<header>
<h1>〇〇株式会社</h1>
<nav>
ホーム サービス お問い合わせ
</nav>
</header>多くの Webサイト で見かける「ページ上部のヘッダー」は、この使い方です。
② 記事（article）の導入部分
headerタグ は、ブログ記事などの独立したコンテンツの導入部分にも使用できます。
例えば、記事タイトルや投稿日、投稿者情報など、本文を読む前に確認する情報をまとめる場合です。
<article>
<header>
<h2>HTMLのheaderタグとは？</h2>
<p>投稿日：2026年8月2日</p>
</header>
<p>
記事本文
</p>
</article>③ sectionなどテーマごとの導入部分
headerタグ は、サービス紹介や会社概要など、テーマごとに分けた section の導入部分にも使用できます。
例えば、そのテーマの見出しや概要説明をまとめる場合です。
<section>
<header>
<h2>サービス紹介</h2>
<p>提供しているサービスについて紹介します。</p>
</header>
<p>
サービスの詳しい内容
</p>
</section>このように、headerタグ は「ページの一番上に置くタグ」ではなく、その内容を紹介する導入部分を表すタグです。
どの場所に配置できるのか、複数使用する場合の考え方や注意点については、別記事で詳しく解説します。
headerタグの中には何を書く？
headerタグ を使う場所が分かったら、次に気になるのが「headerタグの中には何を書くのか」という点です。
結論から言うと、headerタグ の中に入れる内容に決まったルールがあるわけではありません。
headerタグ の役割は、そのページやコンテンツの導入部分を表すことです。
そのため、訪問者が内容を理解するために必要な案内情報をまとめて入れます。
実際の Webサイト では、以下のような要素を入れることが多くあります。
① サイト名
Webサイト全体の名前です。
企業サイトであれば会社名、ブログであればブログ名などを表示します。
訪問者が「どのサイトを見ているのか」を理解するための基本的な情報です。
② ロゴ
企業やサービスを表すロゴ画像です。
サイト名と一緒に表示したり、ロゴをクリックするとトップページへ移動できるように設定したりすることがあります。
③ 見出し
ページやコンテンツのタイトルとなる見出しです。
ページ全体の header であればサイトタイトル、article内 の header であれば記事タイトルなどを配置します。
ただし、headerタグ は「h1を必ず入れるためのタグ」ではありません。
header の役割は、見出しを囲むことではなく、その内容の導入部分を表すことです。
④ ナビゲーションメニュー
Webサイト内の別ページへ移動するためのメニューも、header 内によく配置されます。
例えば、
・ホーム
・サービス紹介
・会社概要
・お問い合わせ
などを配置します。
通常は navタグ を組み合わせて使用します。
⑤ パンくずリスト
現在のページがWebサイト内のどの位置にあるのかを示す情報です。
例えば、
ホーム ＞ HTML基礎 ＞ headerタグとは？
のような階層表示です。
訪問者が現在位置を把握しやすくするために使用されます。
⑥ 検索フォーム
サイト内検索を行うための入力欄です。
情報量の多いWebサイトでは、header部分に検索機能を配置することがあります。
⑦ ページや記事の補足情報
ブログ記事やニュース記事などでは、導入部分に以下のような情報を含めることがあります。
・投稿日
・更新日
・投稿者名
・カテゴリー
・記事の概要
記事の内容を読む前に、読者へ基本情報を伝えるためのものです。
このように、headerタグ の中に入れる内容はサイトの種類によって異なります。
大切なのは、「ロゴやメニューを入れる場所」と覚えることではなく、そのページやコンテンツを紹介するための情報をまとめる場所として理解することです。
headerタグの基本の書き方
headerタグ の役割や中に入れる内容が分かったら、次は実際の書き方を確認してみましょう。
headerタグ の基本は、導入部分となる内容を <header> と </header> で囲むことです。
例えば、Webサイト の上部にサイト名とナビゲーションメニューを配置する場合は、以下のように書きます。
<header>
<h1>〇〇株式会社</h1>
<nav>
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">お問い合わせ</a>
</nav>
</header>このように、headerタグ で導入部分を囲み、その中に見出しやナビゲーションなどの案内情報を書きます。
ただし、headerタグ は「必ずh1やnavを入れるためのタグ」ではありません。
ページやコンテンツの導入部分として必要な情報をまとめるために使用します。
例えば、ブログ記事の header であれば、記事タイトルや投稿日などを入れることもあります。
まずは、「導入部分をheaderタグで囲む」という基本を理解しておけば十分です。
