<h1>〜<h6>の見出しタグは、文字を大きくする道具ではありません。正体はページの目次です。目次だと分かって使うと、読み上げソフトの人にも、検索エンジンにも、ページの構造がきちんと伝わります。
見出しだけを拾って読む人がいる
読み上げソフト（スクリーンリーダー）には、ページ内の見出しだけを一覧して、読みたい場所へジャンプする機能があります。目が見える人が「ざっと見出しを流し読みして、読みたい節から読む」のと同じことを、この機能でやっているわけです。
つまり見出しの階層が正しいと、それだけでページに目次がついたのと同じ。逆に太字の飾り文字で代用すると、その目次から丸ごと抜け落ちます。
検索エンジンも同じように見出しの階層からページの構造を読み取ります。正しい見出しは、アクセシビリティとSEOの一石二鳥です。
やりがちな2つの事故
見た目のためにレベルを飛ばす
「h2だと大きすぎるからh4にしよう」——これをやると、目次に存在しない階層の穴があきます。読み上げソフトの利用者は「h3を聞き逃したかな？」と迷子になります。大きさの調整はCSSの仕事です。
太字を見出しの代わりにする
太字の<p>は、見た目は見出しでも目次には載りません（上のデモのとおり）。逆に「見出しタグを、目立たせたいだけの一文に使う」のも同じ事故を逆向きに起こします。章のタイトルなら見出しタグ、強調したいだけなら太字と使い分けましょう。
「下るときだけ順番どおり」——戻るのは自由
「順番どおり」と聞くと、h3のあとは必ずh4？と不安になりますが、そうではありません。ルールは下るときに飛ばさない、これだけです。
- ❌
h2の次にいきなりh4——h3を飛ばして下るのはNG - ○
h3の次にh2——節が終わって新しい章に戻るのはOK - ○
h2の次にまたh2——同じレベルを並べるのもOK
本の目次を思い出すと自然です。第1章の第3節が終わったら第2章が始まる——節から章へ「戻る」のは当たり前の流れですよね。迷ったら「この見出しは何の中身？」と考えて、その親のひとつ下のレベルを選べば正解です。
h1はページに1つ
<h1>はページ全体の題名です。本の表紙が1冊に1つなのと同じで、1ページに1つだけ。その下の章立てを<h2>、さらに細かい節を<h3>が受け持ちます。
<h1>しまちゃんのページ</h1> <!-- ページの題名：1つだけ -->
<h2>すきなもの</h2> <!-- 章 -->
<h3>たべもの</h3> <!-- 章の中の節 -->
<h3>あそび</h3>
<h2>れんらく</h2> <!-- 章 -->インデント（字下げ）は分かりやすさのためで、実際のHTMLでは不要です。頭の中でこの目次の木が描ければ合格です。
このレッスンのまとめ
- 見出しはページの目次。
h1→h2→h3と階層の順番どおりに使う - 大きさが気に入らないときはCSSで直す（レベルを飛ばさない・太字で代用しない）
<h1>はページの題名として1つだけ