HTML 入門

HTML 見出しタグ h1〜h6

本が章や見出しを使って内容を整理するように、Webページでも HTML の見出しタグを使用して、コンテンツの階層と重要度を定義します。

効果的な構造化は、主に以下の 2 点において非常に重要です。

  • 可読性（Readability）： ユーザーが主要なトピックを素早くスキャンし、理解するのを助けます。
  • SEO とアクセシビリティ： Google などの検索エンジンや、視覚障害者が使用するスクリーンリーダーが Web ページの構造を理解するのを助けます。

1. HTML 見出しタグを理解する

HTML では <h1> から <h6> まで、6 つのレベルの見出しが用意されています。

  • <h1>：最も重要で、最高レベルの見出し。
  • <h6>：最も重要度が低く、最低レベルの見出し。

これらのタグは「ブロックレベル要素（block-level elements）」に属します。つまり、通常は新しい行から始まり、親要素の全幅を占有します。

1.1 見出しのセマンティクス（意味論）的な重要性

最も重要なポイントは、見出しは「フォントサイズ」ではなく「構造」を表すということです。

ブラウザのデフォルト設定では <h1> が大きく太く、<h6> が小さく表示されますが、「文字を大きくしたいから」という理由で見出しタグを使ってはいけません。それは CSS の役割です。見出しタグは、あくまで論理的な構造を構築するために使用すべきです。

  • <h1>：ページ全体、またはメインコンテンツエリアを代表するメインタイトル。
    • 比喩： 本のタイトルや新聞のトップニュース。
    • ルール： 通常、ページのテーマを明確にするために、1 ページにつき 1 つの <h1> のみにすべきです。
  • <h2>：コンテンツ内の主要なセクション。
    • 比喩： 本の章の名前。
  • <h3>：<h2> セクション内のサブセクション。
  • <h4>, <h5>, <h6>：さらに深い階層のコンテンツ細分化。一般的によく使われるわけではありませんが、複雑なドキュメント構造には不可欠です。

注意： ブラウザは見出しタグにデフォルトのスタイル（例：<h1> は最大かつ太字、<h6> は最小かつ太字）を適用しますが、この外観は CSS（Cascading Style Sheets）で上書きできますし、実際に頻繁に行われます。視覚的にどう変化しようとも、見出しのセマンティクス的価値（意味）は変わりません。見出しレベルを選択する際は、デフォルトの視覚スタイルではなく、常にコンテンツの論理的構造を優先してください。

2. なぜ見出しの階層を守る必要があるのか？

論理的な順序で見出し（h1 -> h2 -> h3）を使用することが非常に重要な理由は、以下の通りです。

2.1 可読性とユーザーエクスペリエンス（UX）

ユーザーは通常、Web ページを一言一句読むのではなく、見出しをスキャンして興味のある内容を探します。優れた階層構造があれば、目的の情報を素早く見つけることができます。

実例： EC サイトの商品ページでは、商品名が <h1> です。「商品説明」「仕様スペック」「カスタマーレビュー」は <h2> になります。そして「仕様スペック」の中にある「サイズ」「重量」などは <h3> となります。

2.2 アクセシビリティ（Accessibility）

スクリーンリーダーを使用する視覚障害のあるユーザーは、ナビゲーションを見出し構造に大きく依存しています。彼らは見出しから見出しへとジャンプして移動することができます。もし見出し構造が混乱している（例：h1 からいきなり h4 に飛ぶ）と、ユーザーは困惑し、ページを正しく閲覧できなくなる可能性があります。

2.3 検索エンジン最適化（SEO）

検索エンジンは見出しタグを分析して、あなたの Web ページが何について書かれているかを理解します。見出しを正しく使用することで、関連する検索結果でのページランクを向上させることができます。

想定シナリオ： オンラインのレシピサイトを考えてみましょう。「カルボナーラの作り方」というレシピで、<h1> をメインタイトルに使用し、<h2> を「材料」や「手順」に、<h3> を「下準備」や「調理時間」に使用すれば、検索エンジンはレシピの主題とその主要な構成要素を簡単に識別できます。これにより、そのページが「カルボナーラ 材料」や「カルボナーラ 作り方」といった検索結果に表示される可能性が高まります。

3. HTML 見出し適用のベストプラクティス

コードを書く際は、以下の「黄金律」を守ってください。

  • 1 ページにつき 1 つの <h1>： これにより、検索エンジンやツールがページのコアテーマを特定しやすくなります。
  • 論理的な順序に従う： レベルを飛ばさないでください。
    • 正しい： <h1> → <h2> → <h3>
    • 間違い： <h1> → <h3>（<h2> を飛ばすと、構造が断絶してしまいます）
  • 見出しは内容を説明するものにする： 見出しのテキストは、その下の段落の内容を正確に要約したものであるべきで、曖昧な表現は避けてください。
  • スタイルのために見出しを使わない： 単に太字にしたり文字を大きくしたりしたい場合は、CSS や <strong> タグを使用してください。文字を小さく見せたいという理由だけで <h6> を使うことは絶対に避けてください。

4. 実践例とデモンストレーション

見出しを効果的に使用する方法と、避けるべき一般的な落とし穴についての例を見てみましょう。

4.1 ケース 1：見出しを用いた基本的なドキュメント構造

これは、以前学んだ HTML の基本構造に基づいて、シンプルなブログ記事を構築する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>マイブログ記事</title>
</head>
<body>
    <h1>Web 開発の驚異を探索する</h1> 

    <h2>HTML 入門</h2>
    <p>HTML はすべての Web ページの骨格です。</p>

    <h3>要素とは何か？</h3>
    <p>要素は HTML の構成ブロックです。</p>

    <h3>属性について詳しく</h3>
    <p>属性は要素に関する追加情報を提供します。</p>

    <h2>CSS を使い始める</h2>
    <p>CSS は Web ページの外観をスタイリングするために使用されます。</p>

    <h3>CSS の基本構文</h3>
    <p>CSS ルールはセレクターと宣言ブロックで構成されます。</p>

    <h2>JavaScript の基礎</h2>
    <p>JavaScript はインタラクティブ性を追加します。</p>

    <h4>変数とデータ型</h4>
    <p>変数の宣言方法を理解することは基礎中の基礎です。</p>

    <h3>結論</h3>
    <p>これら 3 つをマスターすれば、強力な Web サイトを作成できます。</p>
</body>
</html>

この例では：

  • <h1> はブログ記事全体のタイトルに使用されています。
  • <h2> タグは「HTML 入門」「CSS を使い始める」「JavaScript の基礎」といった主要なセクションに使用されています。
  • <h3> タグは <h2> セクション内のサブセクション（例：「要素とは何か？」）に使用されています。
  • <h4> は「JavaScript の基礎」という <h2> 内のさらに深い詳細に使用されています。この構造は論理が明確で、追いかけやすいものです。

4.2 ケース 2：よくある間違い —— 誤った見出しの使い方

以下は、見出しタグをどのように使うべきではないかを示す、よくある間違いの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>構造が悪いページ</title>
</head>
<body>
    <h1>ちょっとしたお知らせ</h1>
    <p>これは小さなメッセージです。</p>

    <h3>重要な告知！</h3>
    <p>皆さんに重要な告知を共有します。</p>

    <h6>これは単に太字にしたいだけのテキストです。</h6>
    <p>これが見出しであるというセマンティクス的な意味はありません。</p>

    <h1>第 1 セクション メインタイトル</h1>
    <p>第 1 セクションの内容。</p>

    <h1>第 2 セクション メインタイトル</h1>
    <p>第 2 セクションの内容。</p>
</body>
</html>

この間違った例では：

  • 最初の <h1> 「ちょっとしたお知らせ」はページ全体のメインタイトルではありません。単なる小さなメッセージです。
  • <h1> から <h3> へ飛んでおり、<h2> が飛ばされているため、論理的な階層が壊れています。
  • <h6> は、構造的な小見出しとしてではなく、単に文字を太く小さくするために使われています。
  • 複数の <h1> タグが存在するため、検索エンジンやスクリーンリーダーがページの主要なトピックを判断する際に混乱を招きます。

このような構造は、混乱を招き、アクセシビリティの低い体験を生み出します。常に覚えておいてください。見出しは単なる視覚的なスタイルのためではなく、セマンティクス的な価値（意味）のために使用するものです。

5. まとめ

見出しは単なる大きな太字ではありません。構造化が適切で、アクセシブルであり、検索エンジンに優しい Web ページを構築するための基礎です。

黄金律を忘れないでください。

  1. 1 ページにつき 1 つの <h1>。
  2. 階層を連続させる（h1 > h2 > h3）。
  3. セマンティクス優先（スタイルのためではなく、構造のために使う）。