見出しタグを使おう
ストーリー
先輩「HTMLの基本構造は分かったね。次は具体的なタグを使って文章を作ってみよう」
どんなタグから始めればいいですか？
先輩「まずは見出しタグだね。本に目次があるように、Webページにも見出しが必要なんだ」
見出しタグとは
見出しタグは、ページ内のタイトルや見出しを定義するためのタグです。
HTMLには h1 から h6 までの6段階 の見出しがあります。
html
<h1>最も大きい見出し（レベル1）</h1>
<h2>2番目に大きい見出し（レベル2 ）</h2>
<h3>3番目に大きい見出し（レベル3）</h3>
<h4>4番目に大きい見出し（レベル4）</h4>
<h5>5番目に大きい見出し（レベル5）</h5>
<h6>最も小さい見出し（レベル6）</h6>見出しの階層構造
見出しタグは 階層（レベル） を表します。本の構造と同じです。
本のタイトル → <h1>
├── 第1章 → <h2>
│ ├── 1-1節 → <h3>
│ └── 1-2節 → <h3>
├── 第2章 → <h2>
│ ├── 2-1節 → <h3>
│ │ └── 補足 → <h4>
│ └── 2-2節 → <h3>
└── 第3章 → <h2>
重要なルール
| ルール | 説明 |
|---|---|
| h1は1ページに1つ | ページ全体のタイトルに使う |
| レベルを飛ばさない | h1の次はh2、h2の次はh3 |
| 意味で選ぶ | 文字サイズで選ばない（サイズはCSSで変えられる） |
実践：見出しを書いてみよう
以下のコードを書いて、ブラウザで確認しましょう。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>見出しの練習</title>
</head>
<body>
<h1>自己紹介ページ</h1>
<h2>プロフィール</h2>
<h3>基本情報</h3>
<h3>経歴</h3>
<h2>スキル</h2>
<h3>プログラミング</h3>
<h3>言語</h3>
<h2>趣味</h2>
</body>
</html>ブラウザで確認すると、h1が最も大きく、h3が最も小さく表示されます。
よく ある間違い
間違い1: h1を複数使う
html
<!-- 間違い -->
<h1>ページタイトル</h1>
<h1>もう一つのタイトル</h1>h1はページに 1つだけ 使います。
間違い2: レベルを飛ばす
html
<!-- 間違い: h2を飛ばしている -->
<h1>タイトル</h1>
<h3>小見出し</h3>html
<!-- 正しい: 順番通り -->
<h1>タイトル</h1>
<h2>見出し</h2>
<h3>小見出し</h3>間違い3: 文字サイズ目的で使う
html
<!-- 間違い: 文字を小さくしたいからh6を使う -->
<h6>小さい文字にしたい</h6>文字サイズを変えたい場合は、CSSを使います。見出しタグは 意味 で選びましょう。
見出しとSEO
見出しタグは SEO（検索エンジン最適化） にも重要です。
| 要素 | SEOへの影響 |
|---|---|
| h1 | ページの主題として最重要 |
| h2 | セクションのテーマとして重要 |
| h3以降 | 内容の構造化に役立つ |
Googleなどの検索エンジンは、見出しタグを手がかりにページの内容を理解しています。
まとめ
| ポイント | 内容 |
|---|---|
| 見出しタグ | h1〜h6の6段階 |
| h1 | ページに1つだけ。最も重要な見出し |
| 階層ルール | レベルを飛ばさず順番に使う |
| 選び方 | 文字サイズではなく意味で選ぶ |
| SEO | 検索エンジンがページ構造を理解する手がかり |
チェックリスト
- h1〜h6タグを使い分けられる
- 見出しの階層構造を正しく作れる
- h1は1ページに1つというルールを理解した
- 見出しタグを使ったページを作成できた
次のステップへ
見出しが書けるようになりました。次は、本文となる段落やテキスト装飾のタグを学びましょう。
推定読了時間: 30分