HTMLの見出しタグを完全解説！見出しの意味から教えます

Webページを作るとき、ただ文章を並べるだけでは「読みやすさ」が足りません。重要なポイントを目立たせたり、内容を整理して伝えるために必要なのが「見出し」です。

この記事では、HTMLで使う見出しタグ（<h1>〜<h6>）の基本から、正しい使い方、階層構造の考え方（ピラミッド構造）まで、初心者にもわかりやすく解説します！

そもそも「見出し」って何？

「見出し」とは、文章やページのタイトルや章の名前のことです。本や新聞を思い浮かべてみてください。大きなタイトルがあり、その下に小さな見出しや本文が続いていますよね？

大きな見出し → 記事やページのメインタイトル
中くらいの見出し → 章やセクションのタイトル
小さな見出し → 小見出しや細かい説明部分

これをWebページで表現するために使うのが、HTMLの「見出しタグ」です。

ピラミッド構造で理解する見出しの階層

見出しは単に「大きさ」の違いではなく、「階層構造」を表すものです。

🗂️ ピラミッド構造のイメージ（会社の組織図の例）

<h1> 会社（Company）
　　└── <h2> 営業部（Sales Department）
　　　　├── <h3> 国内営業（Domestic Sales）
　　　　└── <h3> 国際営業（International Sales）
　　└── <h2> 開発部（Development Department）
　　　　├── <h3> ソフトウェア開発（Software Development）
　　　　└── <h3> ハードウェア開発（Hardware Development）

✅ ポイント:

<h1> は1ページに1つ（そのページのメインテーマ）
<h2> は<h1>の「サブテーマ」
<h3> 以降 はさらに細かい内容を説明するために使う

👉 ピラミッド構造を意識すると、ページ全体の情報が整理され、SEOにも効果的！

コピペしながら学べる見出しタグの実践！

実際にコードをコピペして、ブラウザで確認してみましょう！

<!DOCTYPE html>
<html>
<head>
  <title>見出しタグの練習</title>
</head>
<body>
  <h1>会社（Company）</h1>
  <h2>営業部（Sales Department）</h2>
  <h3>国内営業（Domestic Sales）</h3>
  <h3>国際営業（International Sales）</h3>
  <h2>開発部（Development Department）</h2>
  <h3>ソフトウェア開発（Software Development）</h3>
  <h3>ハードウェア開発（Hardware Development）</h3>
</body>
</html>

💡 ポイント:
ブラウザで開くと、見出しの階層ごとに大きさが異なるのがわかります！

📝 おさらいクイズ！

これが答えられたら、この記事の内容は完璧に理解できています！ ✅

1️⃣ 正しい見出しの使い方はどれ？（1つ選択）

A. <h1> → <h3> → <h2> の順番で使う
B. <h1>は1ページに複数使ってもOK
C. <h1>は1つだけ、階層は順番通りが正しい

答え: ✅ Cが正解！
階層は順番通り、<h1>は1ページに1つだけが基本です。

2️⃣ ピラミッド構造で間違っている例はどれ？

A. <h1> → <h2> → <h3> と順に使う
B. <h1> → <h4> → <h2> と飛び級する
C. <h1>の下に複数の<h2>がある

答え: ✅ Bが不正解！
階層は順に使うのがルール。飛び級はNGです。

🎯 まとめ

<h1>〜<h6>は、ページの見出し（構造）を作るためのタグ
ピラミッド構造を意識して、階層を守ることが大切！

HTMLの見出しタグを完全解説！見出しの意味から教えます