HTMLのh1〜h6の使い方｜見出しの階層と記事構成の基本

見出しレベルは文字サイズではなく階層で選ぶ

見出しを少し小さく見せたいから、h2ではなくh4にする。見た目は整っても、文書の構造まで変えてしまうことがあります。見出しのレベルは、内容がどのまとまりに属するかを示すものなんです。

W3Cの解説も、見出しを内容の関係や重要さに応じて組み立てる考え方を示しています。文字の大きさはスタイルで調整し、構造は話のまとまりで考えたいですね。

h1・h2・h3で主題・節・小節を整理

例えば、記事の主題をh1、大きな節の「準備」「手順」「確認」をh2、手順の中の細かな工程をh3にします。同じ階層の節は同じレベルで並べ、小節へ進むときにh2からh4へ飛ばすことは避けます。

小節を終えて次の大きな節へ進むときは、h3やh4からh2へ戻って構いません。見出しの番号を順番に使い切るのではなく、内容の親子関係を表すためです。

見出しだけを取り出して、何について、どんな順番で説明しているかを確認しましょう。「ポイント」「まとめ」ばかりにせず、その節で分かることを短く具体的に書きます。

見出しだけで読みたい場所へ移れるか確認

読者は、いつも最初から最後まで同じ速さで読むわけではありません。必要なところへ移りたい人や、支援技術で見出しをたどる人もいます。

私なら、本文の言葉を整えるのと同じくらい、見出しの並びを確認します。大きく飾った文章があるだけではなく、どこを読めば答えへ近づくか分かる。それが見出しに持たせたい役割です。