HTML要素 ・ ページ構造
<header>
ヘッダー領域
ページやセクションの導入部分を表す要素です。ロゴやサイト名、ナビゲーションなどを入れます。
01
サンプルコード
HTML
1<header class="site-header">
2 <a href="/" class="logo">Cafe Mimosa</a>
3 <nav>
4 <a href="/menu">メニュー</a>
5 <a href="/access">アクセス</a>
6 </nav>
7</header>
CSS
1.site-header {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5 padding: 12px 20px;
6 background: #201f1d;
7}
8.site-header a {
9 color: #fff;
10 text-decoration: none;
11}
12.site-header nav {
13 display: flex;
14 gap: 16px;
15}
16.logo {
17 font-weight: bold;
18}
02
実行結果
ブラウザでの表示
03
解説
header は、その範囲の「頭」にあたる内容をまとめる要素です。ページ全体の上部に置くサイトヘッダーに使うのが代表的です。
article や section の中に置くと、その記事や章の導入部分（タイトル・投稿日など）を表せます。1ページに複数あってもかまいません。
header 自体に見た目はありません。横並びのレイアウトなどはCSSで行います。
04
応用例・注意点
ページ構造を表す要素
| 要素 | 説明 |
|---|---|
header | 導入部分・ヘッダー |
nav | 主要なナビゲーション |
main | ページの主要な内容 |
footer | フッター |
aside | 補足情報 |
記事の見出しまわりに使う
記事のタイトルと投稿日を header でまとめます。
HTML
1<article>
2 <header>
3 <h2>春の新メニュー</h2>
4 <time datetime="2026-04-01">2026年4月1日</time>
5 </header>
6 <p>…</p>
7</article>
注意点
- 01header の中に header や footer は入れられません。
- 02画面上部に固定するかどうかは、CSSの position: sticky などで指定します。