💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
HTML h1 h2 h3の見出し階層｜正しい使い方と例
📌
結論
h1 → h2 → h3 の順番を守ろう
📝 実際のコードはこちら
<h1>私のページ</h1>
<h2>自己紹介</h2>
<h3>趣味</h3>見出しの階層ルール
HTMLの見出しは h1 〜 h6 の6段階。数字が小さいほど重要度が高くなります。| タグ | 重要度 | 例え |
|---|---|---|
| 最高 | 本のタイトル |
| 高い | 章のタイトル |
| 中 | 節のタイトル |
| 低い | 細かい区分 |
なぜ階層が重要なのか
これはSEO（検索エンジン対策）と直接関わります。 Googleは見出しの階層からページの構造を読み取ります。h1の次にh3が来るとこの構造は壊れていると判断される可能性があります。 また、スクリーンリーダーを使う方は見出しでページをナビゲートします。正しい階層にすることで、誰にとっても使いやすいページになります。よくあるミス
| ミス | 問題点 |
|---|---|
| h1を2つ以上使う | 1ページにh1は1つが推奨 |
| h1の次にh3 | 階層を飛ばさない |
| 見た目目的で見出しを使う | 見た目はCSSで変える |
まとめ
・見出しは h1 → h2 → h3 の順で使う ・h1 は1ページに1つ ・見た目ではなく意味で使い分ける演習で試してみよう
好きなテーマで、h1、h2、h3の階層構造を作ってみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
好きなテーマで、h1、h2、h3の3つの見出しを階層順に作ってください。（例：私のページ、好きな映画の紹介など）
詰まったらヒント
h1が最大、h2、h3と小さくなります。