見出しは順番どおりに

<h1>〜<h6>の見出しタグは、文字を大きくする道具ではありません。正体はページの目次です。目次だと分かって使うと、読み上げソフトの人にも、検索エンジンにも、ページの構造がきちんと伝わります。

見出しだけを拾って読む人がいる

読み上げソフト（スクリーンリーダー）には、ページ内の見出しだけを一覧して、読みたい場所へジャンプする機能があります。目が見える人が「ざっと見出しを流し読みして、読みたい節から読む」のと同じことを、この機能でやっているわけです。

つまり見出しの階層が正しいと、それだけでページに目次がついたのと同じ。逆に太字の飾り文字で代用すると、その目次から丸ごと抜け落ちます。

検索エンジンも同じように見出しの階層からページの構造を読み取ります。正しい見出しは、アクセシビリティとSEOの一石二鳥です。

やりがちな2つの事故

見た目のためにレベルを飛ばす

「h2だと大きすぎるからh4にしよう」——これをやると、目次に存在しない階層の穴があきます。読み上げソフトの利用者は「h3を聞き逃したかな？」と迷子になります。大きさの調整はCSSの仕事です。

太字を見出しの代わりにする

太字の<p>は、見た目は見出しでも目次には載りません（上のデモのとおり）。逆に「見出しタグを、目立たせたいだけの一文に使う」のも同じ事故を逆向きに起こします。章のタイトルなら見出しタグ、強調したいだけなら太字と使い分けましょう。

h1はページに1つ

<h1>はページ全体の題名です。本の表紙が1冊に1つなのと同じで、1ページに1つだけ。その下の章立てを<h2>、さらに細かい節を<h3>が受け持ちます。

<h1>しまちゃんのページ</h1>   <!-- ページの題名：1つだけ -->
  <h2>すきなもの</h2>         <!-- 章 -->
    <h3>たべもの</h3>         <!-- 章の中の節 -->
    <h3>あそび</h3>
  <h2>れんらく</h2>           <!-- 章 -->

インデント（字下げ）は分かりやすさのためで、実際のHTMLでは不要です。頭の中でこの目次の木が描ければ合格です。

このレッスンのまとめ

1. 見出しはページの目次。h1→h2→h3と階層の順番どおりに使う
2. 大きさが気に入らないときはCSSで直す（レベルを飛ばさない・太字で代用しない）
3. <h1>はページの題名として1つだけ