見出しタグ h1〜h6 の使い方 — 大きさで選ぶと失敗する

見出しには h1 から h6 まで6段階あります。学び始めのころ、わたしはこれを「大きさの種類」だと思っていました。少し小さくしたいから h3 にする、という選び方です。これが後々やっかいな問題を引き起こします。

見出しは「本の目次」だと思ってください

本には章があり、その中に節があり、さらに項があります。h1〜h6 はこの階層と同じです。数字が大きくなるほど、細かい話になります。

つまり h3 は「h2 の中身」です。h2 が無いのにいきなり h3 が出てくるのは、章が無いのに節だけがある本と同じで、おかしな構造になります。

「h2 は大きすぎるから h4 にしたい」と思ったときは、タグを変えるのではなくCSSで小さくします。タグは意味、CSSは見た目。この役割分担を守るのが基本です。

CODE同じ h2 でも、CSSで大きさは自由コードを書き換えると、すぐ下で動きます

font-size の数字を変えてみてください。タグは h2 のままなのに、大きさだけが変わります。

h1 はそのページのタイトルです。本の表紙に題名が2つ並んでいないのと同じで、ふつうは1つです。ブログなら記事のタイトル、商品ページなら商品名が h1 になります。

サイト名を毎ページの h1 にしてしまう例をよく見ますが、それだとどのページも同じタイトルということになってしまいます。トップページ以外では、サイト名はロゴ（画像やリンク）として置き、h1 はそのページの内容にしましょう。

h2 の次に h4 を書く、といった飛ばしはしないでください。見た目には気づきませんが、読み上げ環境を使っている人には「1つ抜けている」と感じられます。検索エンジンもページの構造を読み取りにくくなります。

CODE正しい階層と、崩れた階層コードを書き換えると、すぐ下で動きます

左が正しい形です。飛ばしても見た目は成立してしまうので、書くときに意識するしかありません。

迷ったときの判断はかんたんです。「目次に載せたい項目か？」と考えてください。載せたいなら見出し、そうでなく単に強調したいだけなら strong や、CSSで太字にした段落で十分です。