HTMLのheaderタグを完全ガイド！初心者でもわかるヘッダーの使い方
新人
「HTMLでページの上部にヘッダーを作りたいんですけど、どうすればいいですか？」
先輩
「HTMLにはheaderタグがあります。これを使うと、ページの上部にヘッダーを作成できます。ヘッダーは、ナビゲーションメニューやロゴなど、ページの最初に表示したい要素を配置するのに便利です。」
新人
「なるほど、ヘッダーを使うとページの上部が整理できるんですね。具体的にどのように使えばいいんですか？」
先輩
「それでは、headerタグの基本的な使い方を見ていきましょう！」
1. headerタグとは？
headerタグは、HTML5で新たに追加されたタグの一つで、主にウェブページのヘッダー部分を定義します。ページの最上部に配置し、サイトのロゴやナビゲーションメニュー、検索ボックスなどを含めることができます。
<header>
<h1>ウェブサイトのロゴ</h1>
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#about">会社情報</a></li>
<li><a href="#services">サービス</a></li>
</ul>
</nav>
</header>
上記の例では、headerタグでウェブサイトのロゴ（h1タグ）とナビゲーションメニュー（navタグ）を含めています。navタグ内にはリンク（aタグ）があり、これらを使ってページ内の他のセクションに移動できます。
2. ヘッダーのデザインを整える方法
headerタグは、HTMLだけではデザインを細かく調整することはできません。CSSを使ってデザインを整えることができます。例えば、ヘッダーの背景色を変更したり、ナビゲーションメニューを横並びにしたりすることができます。
<header>
<h1>ウェブサイトのロゴ</h1>
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#about">会社情報</a></li>
<li><a href="#services">サービス</a></li>
</ul>
</nav>
</header>
CSSを使って、上記のようなヘッダーに背景色を付けたり、リンクを横並びにしたりすることができます。
3. ヘッダー内の要素を追加する方法
headerタグの中には、さまざまな要素を追加することができます。例えば、検索ボックスやソーシャルメディアのリンクなどです。これらの要素を追加することで、より機能的なヘッダーを作成できます。
<header>
<h1>ウェブサイトのロゴ</h1>
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#about">会社情報</a></li>
<li><a href="#services">サービス</a></li>
</ul>
</nav>
<div class="search-box">
<input type="text" placeholder="検索...">
<button>検索</button>
</div>
</header>
ここでは、ヘッダー内に検索ボックスを追加しました。ユーザーがウェブサイト内を検索できるようになります。
4. ヘッダーの役割とSEO効果
headerタグは、SEO（検索エンジン最適化）の観点からも重要です。検索エンジンは、ページの構造を理解するためにHTMLタグを解析します。headerタグは、ページの最上部に位置し、重要なコンテンツを含んでいるため、適切に使用することで検索エンジンにとって有益な情報を提供することができます。
また、headerタグ内にナビゲーションメニューを配置することで、ユーザーがウェブサイト内を簡単に移動できるようになります。これにより、ユーザーエクスペリエンスが向上し、SEOにも良い影響を与えることが期待できます。
5. headerタグとnavタグの関係
headerタグの中では、ナビゲーションメニューを作るためにnavタグを一緒に使うことがよくあります。navタグは、ウェブサイト内のページ移動に関するリンクをまとめるためのHTMLタグです。
一般的なウェブサイトでは、ヘッダーの中にメニューを配置することが多く、トップページ、会社情報、サービス、ブログ、お問い合わせなどのリンクを並べて表示します。これにより、ユーザーはウェブサイト内をスムーズに移動できるようになります。
<header>
<h1>ウェブサイトのロゴ</h1>
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#about">会社情報</a></li>
<li><a href="#blog">ブログ</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
このようにheaderタグの中にnavタグを配置することで、ページ上部に分かりやすいナビゲーションメニューを作成することができます。
6. headerタグをページ全体で使う方法
headerタグは、ウェブページ全体のヘッダーとして使うだけでなく、記事やセクションの見出し部分として使うこともできます。HTML5では、ページ構造を分かりやすくするためにセマンティックタグが用意されており、その一つがheaderタグです。
例えば、ブログ記事やニュース記事では、記事タイトルや公開日などをまとめるためにheaderタグを使うことがあります。これにより、ページ構造が整理され、読みやすいHTML構造を作ることができます。
<article>
<header>
<h1>記事タイトル</h1>
<p>公開日：2025年1月1日</p>
</header>
<p>ここに記事の本文が入ります。</p>
</article>
このように記事のタイトル部分をheaderタグで囲むことで、HTMLの構造が分かりやすく整理されます。
7. headerタグを使ったシンプルなページ構造
ウェブページを作成するときは、headerタグだけでなく、mainタグやfooterタグなどのHTMLタグと組み合わせて使うことが一般的です。これにより、ページの構造が明確になり、見やすいHTMLを作ることができます。
例えば、ページの上部にヘッダー、中央にメインコンテンツ、下部にフッターを配置することで、基本的なウェブページのレイアウトを作ることができます。
<header>
<h1>ウェブサイトタイトル</h1>
</header>
<main>
<p>ここにメインコンテンツが表示されます。</p>
</main>
<footer>
<p>Copyright 2025 Sample Site</p>
</footer>
このようにheaderタグを使うことで、ウェブページの上部にタイトルやナビゲーションを配置し、分かりやすいページ構造を作ることができます。
