LESSON 30分

ストーリー

先
先輩
HTMLの基本構造は分かったね。次は具体的なタグを使って文章を作ってみよう

どんなタグから始めればいいですか？

先
先輩
まずは見出しタグだね。本に目次があるように、Webページにも見出しが必要なんだ

見出しタグとは

見出しタグは、ページ内のタイトルや見出しを定義するためのタグです。

HTMLには h1 から h6 までの6段階 の見出しがあります。

<h1>最も大きい見出し（レベル1）</h1>
<h2>2番目に大きい見出し（レベル2）</h2>
<h3>3番目に大きい見出し（レベル3）</h3>
<h4>4番目に大きい見出し（レベル4）</h4>
<h5>5番目に大きい見出し（レベル5）</h5>
<h6>最も小さい見出し（レベル6）</h6>

見出しの階層構造

見出しタグは 階層（レベル） を表します。本の構造と同じです。

graph TD
    A["本のタイトル<br>&lt;h1&gt;"] --> B["第1章<br>&lt;h2&gt;"]
    A --> C["第2章<br>&lt;h2&gt;"]
    A --> D["第3章<br>&lt;h2&gt;"]
    B --> E["1-1節<br>&lt;h3&gt;"]
    B --> F["1-2節<br>&lt;h3&gt;"]
    C --> G["2-1節<br>&lt;h3&gt;"]
    C --> H["2-2節<br>&lt;h3&gt;"]
    G --> I["補足<br>&lt;h4&gt;"]

    style A fill:#dbeafe,stroke:#2563eb
    style B fill:#d1fae5,stroke:#059669
    style C fill:#d1fae5,stroke:#059669
    style D fill:#d1fae5,stroke:#059669
    style E fill:#fef3c7,stroke:#d97706
    style F fill:#fef3c7,stroke:#d97706
    style G fill:#fef3c7,stroke:#d97706
    style H fill:#fef3c7,stroke:#d97706
    style I fill:#f3f4f6,stroke:#9ca3af

重要なルール

ルール説明
h1は1ページに1つページ全体のタイトルに使う
レベルを飛ばさないh1の次はh2、h2の次はh3
意味で選ぶ文字サイズで選ばない（サイズはCSSで変えられる）

実践：見出しを書いてみよう

以下のコードを書いて、ブラウザで確認しましょう。

<!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を複数使う

<!-- 間違い -->
<h1>ページタイトル</h1>
<h1>もう一つのタイトル</h1>

h1はページに 1つだけ 使います。

間違い2: レベルを飛ばす

<!-- 間違い: h2を飛ばしている -->
<h1>タイトル</h1>
<h3>小見出し</h3>
<!-- 正しい: 順番通り -->
<h1>タイトル</h1>
<h2>見出し</h2>
<h3>小見出し</h3>

間違い3: 文字サイズ目的で使う

<!-- 間違い: 文字を小さくしたいからh6を使う -->
<h6>小さい文字にしたい</h6>

文字サイズを変えたい場合は、CSSを使います。見出しタグは 意味 で選びましょう。

見出しとSEO

見出しタグは SEO（検索エンジン最適化） にも重要です。

要素SEOへの影響
h1ページの主題として最重要
h2セクションのテーマとして重要
h3以降内容の構造化に役立つ

Googleなどの検索エンジンは、見出しタグを手がかりにページの内容を理解しています。

まとめ

ポイント内容
見出しタグh1〜h6の6段階
h1ページに1つだけ。最も重要な見出し
階層ルールレベルを飛ばさず順番に使う
選び方文字サイズではなく意味で選ぶ
SEO検索エンジンがページ構造を理解する手がかり

チェックリスト

  • h1〜h6タグを使い分けられる
  • 見出しの階層構造を正しく作れる
  • h1は1ページに1つというルールを理解した
  • 見出しタグを使ったページを作成できた

次のステップへ

見出しが書けるようになりました。次は、本文となる段落やテキスト装飾のタグを学びましょう。

推定読了時間: 30分