ここはページ全体の「ヘッダー部分」です。サイト名やページのタイトル、メニューなどをまとめて入れることが多い場所です。
header とは？ ／ どこで使う？ ／ header の例 ／ まとめ
【ご案内】このページの内容は、AI（GPT）が作成したテキストをもとに構成されています。必ずしも完全に正確とは限らないため、学習や制作に利用する際は、公式ドキュメントや信頼できる資料とあわせて確認することをおすすめします。
このページでは、HTML の <header> 要素について説明します。
あわせて、見出しタグ h1〜h5 と p、a、CSS の color・font-size・background-color を使って、header のイメージをつかみやすくしています。
header 要素は、ページ全体やセクションの「先頭部分（ヘッダー）」を表すための要素です。
一般的には、サイト名、ロゴ、ページタイトル、ナビゲーション（メニュー）などをまとめて入れる場所として使います。
書き方の例は次のとおりです。
<header>
<h1>サイトのタイトル</h1>
<p>キャッチコピーなど</p>
</header>
header は、ページ全体の先頭部分に使うことが多いですが、1 つのページの中で複数使うこともできます。
例えば、ページ全体のヘッダーのほかに、記事ごとのヘッダーにも使うことができます。
<header>
<h1>たぬちべ HTML 学習サイト</h1>
<p>HTML の基本を学ぼう！</p>
</header>
<section>（※ここでは説明のために書いています）
<header>
<h2>記事のタイトル</h2>
<p>投稿日や著者など</p>
</header>
記事の本文……
</section>
このページでは要素をしぼるため、section 要素は実際には使っていませんが、イメージとして覚えておいてください。
header 要素にも、ほかの要素と同じように CSS を使って色や文字サイズを指定できます。
このページの一番上にある header は、次のようなイメージでスタイルを指定しています。
header { background-color: #004085; color: #ffffff; }
h1 { font-size: 32px; color: #ffffff; }
a { color: #ffeb3b; }
background-color で背景を濃い青色にし、color で文字を白にしてコントラストを強くしています。
header は、ページ全体だけでなく、小さなまとまりの「見出し部分」にも使えます。
ここには、このセクションの簡単な説明や日付などを書くことができます。
このように、必要に応じて header を使うことで、構造が分かりやすくなります。
header の中には、サイト内の別のページへ移動するリンク（ナビゲーション）を入れることもよくあります。
<header>
<h1>サイト名</h1>
<p>
<a href="index.html">ホーム</a>
<a href="about.html">このサイトについて</a>
</p>
</header>
このページの一番上の header にも、「header とは？」「どこで使う？」「header の例」などのリンクが入っています。
header 要素は、ページ全体やセクションの「先頭部分（ヘッダー）」を表すための要素です。
サイト名、ページタイトル、メニュー（リンク）などをまとめて入れる場所としてよく使われます。
color・font-size・background-color などの CSS を組み合わせることで、見やすく分かりやすいヘッダーを作ることができます。
h1〜h5 や p、a と一緒に使って、ページの構造とデザインを整えていきましょう。