見出しの順序を整える：h2とh3を内容の親子で選ぶ

見出しを小さくしたくてh2をh3へ変えたら、ページの構成が分かりにくくなった。見出しの順序を整えるときは、文字の大きさを決める前に、その話題が何の中に含まれるかを書き出しましょう。

題材は架空の楽器体験会の案内です。HTMLを少し書ける人に向けて、ページ名、大きな話題、その内訳の三段階を扱います。ここで使うh1、h2、h3は見出しのレベルを示すHTML要素です。

色と大きさを外して、話題の一覧を作る

原稿に「楽器体験会」「体験できる楽器」「弦楽器」「打楽器」「参加方法」があるとします。まず、どれがページ全体の名前で、どれが一つの話題かを決めます。

この例なら「楽器体験会」が全体の名前、「体験できる楽器」と「参加方法」が同じ段階の話題です。「弦楽器」と「打楽器」は、体験できる楽器の内訳にします。紙に書く場合は、内訳だけ一段下げて書くと関係を点検できます。

W3C WAIの見出しの説明では、見出しが内容の構成を伝え、ページ内の移動にも利用されることが説明されています。目立たせたい言葉をすべて見出しにするのではなく、その後に続く内容の入口として選びましょう。

内訳に進むときは、一段下の見出しを使う

この練習では、ページの主見出しをh1、二つの話題をh2、楽器の内訳をh3にします。以下は本文部分だけの例です。単独のHTML文書ではないため、手元の練習ページのbody内で使ってください。

<h1>楽器体験会</h1>
<p>初めて楽器に触れる方向けの、架空の案内です。</p>
<h2>体験できる楽器</h2>
<h3>弦楽器</h3>
<p>バイオリンの音の出し方を体験します。</p>
<h3>打楽器</h3>
<p>小さな太鼓でリズムを体験します。</p>
<h2>参加方法</h2>
<p>このページは練習用で、申込は受け付けていません。</p>

よくある失敗は、h2の下にある「弦楽器」を、小さく見えるという理由でh4にすることです。この構成では一段飛ぶため、h3へ直します。見た目を小さくしたい場合は、見出しの意味を保ったままCSSで表示を調整します。

次の大きな話題では、上のレベルへ戻る

「打楽器」のh3の次が「参加方法」のh2でも問題ありません。楽器の内訳を終え、次の大きな話題へ戻るためです。数字が必ず一つずつ増えるように並べる規則ではありません。

逆に「参加方法」をh3にすると、この例では体験できる楽器の内訳のような構成になります。実際に読んだときの文字サイズだけで判断せず、「参加方法は楽器の種類か」と問い直すと、h2へ戻す理由を説明できます。

見出し一覧を読んで話題の親子が不自然なら、タグだけでなく原稿の区切りも検討します。一つの見出しの下で別の話が始まっている場合は、そこに新しい節が必要かもしれません。

構造を決めてから、文字の見た目を整える

同じレベルの見出しを同じ見た目にする設計はできますが、文字サイズの変更と構造の変更は別々に確認します。小さいh2も、大きいh3もCSSでは表現できます。見た目を変えた後も、内容の関係が変わらないならタグまで変える必要はありません。

具体的な文字サイズの役割分けは、文字の大きさを三段階で整理する記事で扱っています。この記事では、装飾を外して見出しだけを読んだときに、本文の構成を説明できるかを確認します。

見出しだけを読み、話題の親子関係をたどる

h1から順に、レベルと文言を紙へ写します。下位の見出しには、それが属する親の見出しを一つ書いてください。親が説明できない箇所や、見た目だけで選んだ箇所を見直します。

修正後は本文も読み、各見出しが続く内容を正しく表しているか確かめます。HTMLの基本構造から練習したい場合は、無料レッスンを使えます。タグの数字をそろえることより、話題のまとまりを言葉で説明できることを今回の完成条件にしましょう。