headerタグ -ページやセクションのヘッダーを示す｜HTML辞典
<header>タグとは？
<header>タグは、HTML文書内でページやセクションのヘッダーを示すためのタグです。
主にタイトルやナビゲーション、ロゴなどを配置するのに適しています。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）。
閉じタグの有無
<header>は開始タグ（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>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
class | CSSのクラスを適用 | <header class="site-header">...</header> |
id | 一意の識別子を設定 | <header id="main-header">...</header> |
style | インラインスタイルを適用 | <header style="background-color: lightgray;">...</header> |
CSSを使ったデザイン変更
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}適切な使用例
✅ Webサイトのヘッダーとして使用
サイト全体のヘッダー部分をマークアップする際に適しています。
<header>
<h1>私たちのウェブサイト</h1>
<nav>
<ul>
<li><a href="/">トップ</a></li>
<li><a href="/services">サービス</a></li>
</ul>
</nav>
</header>✅ 記事ごとのヘッダーに使用
<article>タグ内で記事のタイトルや著者情報を示す場合にも適しています。
<article>
<header>
<h2>最新の技術トレンド</h2>
<p>執筆者: 田中 太郎 | 2025年1月1日</p>
</header>
<p>記事の内容がここに入ります。</p>
</article>
適切でない使用例（誤った使い方）
❌ 単なるスタイリング目的で使用するのはNG
<header>はヘッダー部分を示すためのセマンティックなタグであり、単なるデザイン要素として使うのは適切ではありません。
<!-- NG: 単なるボックスとして使用 -->
<header class="box">
これは単なるボックスです。
</header>✅ 正しい書き方（<div> を使用）
<div class="box">
これは単なるボックスです。
</div>headerタグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<header> | ページやセクションのヘッダー | 意味を持つブロック | Webサイトのヘッダー、記事タイトル |
<div> | 汎用的なグループ化 | 意味を持たない | レイアウトやスタイル適用 |
<nav> | ナビゲーションの定義 | リンクのまとまり | メニューやパンくずリスト |
使用上の注意点
✅ ページ全体のヘッダーとセクションのヘッダーを使い分ける
ページの最上部にあるヘッダーと、各セクション内のヘッダーは異なる用途で使用できます。
✅ 主要な情報を配置する
<header>内には、サイトのタイトルやナビゲーションなど、主要な情報 を配置するのが一般的です。
関連タグ
まとめ
<header>タグは、HTML文書内でページやセクションのヘッダー部分を定義するためのタグです。
サイトタイトル、ナビゲーション、記事の見出しなどに適しており、単なるデザイン目的ではなく、意味のあるコンテンツの整理に使用することが推奨されます。
