太字にすれば見出しになる？HTMLの見出しと見た目を分けよう

文字を大きく、太くしたら見出しになるのかな？ 見た目ではそう見えても、HTML上で見出しとして表されているとは限らないよ。文字の見た目と、文章の中での役割を分けてみよう。

この記事の目標は、同じような表示でも、段落と見出しが違うことを知ること。ブラウザだけで下の作例を試せる。HTMLは内容の構造を、CSSは見た目を指定する仕組みだよ。

pは段落、h2は見出し

<p class="large">持ち物</p>
<h2>持ち物</h2>

一つ目はpという段落に名前を付けたもの。CSSで太く大きくしても、それだけで見出しの要素にはならない。二つ目のh2は、レベル2の見出しを表すHTMLだよ。

HTMLにはh1からh6までの見出しがある。数字は文字サイズの注文ではなく、見出しの階層を表す。同じページの主題、章、その中の小見出し、といった関係を整理するために使う。

見た目をそろえた二つを比べよう

記事下の作例は、イベント案内の一部分。タイトルの「会場案内」はh1で、その下の「持ち物」を切り替える。

1. 最初は「段落を太くする」が選ばれている。「持ち物」は大きく太い文字だが、要素はp。
2. 「h2で見出しにする」を押す。「持ち物」の見た目をほぼ同じに保ち、要素をh2へ変える。
3. 下の「見出しの一覧」に、h1だけでなくh2の「持ち物」が加わることを読む。
4. 段落へ戻すと、一覧からh2が消える。

一覧は、この作例内のh1〜h6をJavaScriptで調べて表示したもの。画面読み上げソフトの実際の操作画面ではない。編集部では、要素の種類と見出し一覧が一緒に切り替わることをChromiumで確認した。

「最初から試す」で段落の初期状態へ戻せるよ。見た目が変わりにくいのは、今回は役割の違いを比べるためにCSSをそろえているからだよ。

小さく見せたいからh4、とは決めない

見出しのレベルを、文字を小さくするためだけに飛ばすと、文章の関係が追いにくくなる。大きさを変えたいなら、構造に合った見出しを選んだうえでCSSを使おう。

h2 {
  font-size: 1.25rem;
}

h2を小さく表示しても、レベル2の見出しである役割は残る。逆にpを大きくしても、その構造は段落のままだよ。見出しを順番に読んだとき、何の章なのか分かる言葉にしてみよう。

見出しの文字が目次として使えるか確認する

支援技術やページ内の目次などでは、見出しの構造をたどる使い方がある。太字だけで作ると、そうした手掛かりとして伝わらない場合があるんだ。

まず見出しだけを抜き出し、内容の流れが分かるか確認しよう。そのあと、本文を読んでも意味がつながるか見直す。今回の確認だけで支援技術すべての使いやすさを検証したことにはならないので、実際のページでも利用する環境に合わせて確認してね。

全体の役割を整理したいときは、HTML・CSS・JavaScriptの違いも参考になるよ。