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にも良い影響を与えることが期待できます。
