先生と生徒の会話形式で理解しよう

生徒

「先生、HTMLの見出しってh1からh6まであるけど、どうやって順番を決めるんですか？」

先生

「見出しの順番はページの構造をわかりやすくするための階層です。h1はページ全体のタイトル、h2は大きな章、h3はその章の小見出しというように整理します。」

生徒

「なるほど。階層を間違えると見た目やSEOに影響がありますか？」

先生

「はい。正しい階層で見出しを使うとユーザーも理解しやすく、検索エンジンもページの内容を正確に把握できます。」

1. h1〜h6の基本的な使い方

HTMLの見出しタグはh1からh6まであり、数字が小さいほど重要度が高くなります。h1はページのメインタイトル、h2は章のタイトル、h3は節のタイトルというように階層を意識して使うと、論理的なページ構造になります。


<h1>ウェブサイト制作ガイド</h1>
<h2>HTMLの基礎</h2>
<h3>見出しタグの役割</h3>
<h3>段落と文章構造</h3>
<h2>CSSの基礎</h2>
<h3>スタイルの設定方法</h3>

ブラウザ表示

2. h1タグの正しい使い方

h1タグは1ページに1つだけ使い、ページのテーマを示します。複数使うと検索エンジンが内容を理解しにくくなるので注意が必要です。サイト全体のタイトルや記事のタイトルに使用します。


<h1>プログラミング入門サイト</h1>
<p>初めてでもわかるプログラミング解説ページです。</p>

ブラウザ表示

3. h2タグとh3タグの階層設計

h2タグはh1の下位見出し、h3タグはh2の下位見出しとして使います。見出しの階層を守ることで、ユーザーが内容を把握しやすく、検索エンジンにも論理構造を伝えられます。


<h1>料理レシピサイト</h1>
<h2>簡単レシピ</h2>
<h3>朝ごはんレシピ</h3>
<h3>ランチレシピ</h3>
<h2>中級レシピ</h2>
<h3>デザートレシピ</h3>

ブラウザ表示

4. h4〜h6タグの活用方法

h4〜h6タグは細かい情報の見出しに使います。必ずしも全てを使う必要はありませんが、大きな章の中でさらに細分化したいときに便利です。階層を飛ばずに順序通り使うことがポイントです。


<h2>旅行ガイド</h2>
<h3>国内旅行</h3>
<h4>北海道</h4>
<h4>沖縄</h4>
<h3>海外旅行</h3>
<h4>ヨーロッパ</h4>
<h4>アジア</h4>

ブラウザ表示

5. 見出しタグとSEOの関係

見出しタグは検索エンジンがページ内容を理解する重要な手掛かりです。h1〜h6の順序を正しく設計することで、検索エンジンがページ構造を理解しやすくなり、SEO効果が高まります。


<h1>健康情報サイト</h1>
<h2>ダイエット方法</h2>
<h3>運動編</h3>
<h3>食事編</h3>
<h2>美容情報</h2>
<h3>スキンケア</h3>
<h3>ヘアケア</h3>

ブラウザ表示

6. セマンティックタグとの組み合わせ

header、section、articleなどのセマンティックタグと見出しタグを組み合わせると、アウトラインがさらに明確になります。これにより、ページの保守性も向上します。


<header>
    <h1>ニュースサイト</h1>
</header>
<article>
    <h2>国内ニュース</h2>
    <p>最新の国内情報を掲載しています。</p>
</article>
<section>
    <h2>海外ニュース</h2>
    <p>世界の出来事をわかりやすくまとめています。</p>
</section>

ブラウザ表示

7. 見出し設計の保守性と実務ポイント

正しい見出し階層を設計すると、ページの内容追加や修正が簡単になります。また、見出しに意味のあるテキストを設定することで、SEOだけでなくユーザー体験も向上します。


<section id="main-content">
    <h2>記事タイトル</h2>
    <p>記事の本文がここに入ります。</p>
    <h3>小見出し1</h3>
    <p>本文詳細内容。</p>
    <h3>小見出し2</h3>
    <p>本文詳細内容。</p>
</section>

ブラウザ表示