文章の見出しを作るHTMLのタグが、h1からh6までの「hタグ」です。見出しは、読者が記事の全体をつかんだり、読みたいところを探したりするための手がかりになります。
この記事では、hタグの基本の書き方と、ブログで使うときに気をつけたいことをまとめます。
hタグの基本
hは「heading（見出し）」の頭文字です。h1から6段階あり、数字が小さいほど上の階層、大きいほど細かい区切りを表します。本でいえば、書名・章・節の関係です。
<h1>記事のメインタイトル</h1>
<h2>大見出し（章のタイトル）</h2>
<h3>中見出し（節のタイトル）</h3>
| タグ | 本でいえば | 使う場所 |
|---|---|---|
| h1 | 書名 | ページのタイトル |
| h2 | 章 | 本文の大きな区切り |
| h3 | 節 | h2 の中をさらに分けるとき |
| h4〜h6 | 項など | もっと細かく分けるとき（ブログではあまり使わない） |
ブラウザでは h1 ほど文字が大きく表示されますが、これはブラウザの初期の見た目で、数字が表しているのは大きさではなく階層です。
WordPressでは、本文の見出しは h2 から
WordPressでは、記事のタイトルが自動で h1 になります。そのため、本文の見出しは h2 から始めます。ブロックエディタの「見出し」ブロックでは、ツールバーの「H2」「H3」でレベルを選べます。
HTMLの決まりとしては、h1 を1ページに複数使っても間違いではありません。ただ、ページのタイトルがどれか分かりにくくなるので、ブログでは記事のタイトルの1つだけにしておくのが分かりやすいです。
使うときに気をつけたいこと
① 下るときは、順番を飛ばさない
h2 の次に細かく分けるときは h3、その中でさらに分けるときは h4、と順に下ります。
<!-- よくない例：h3 を飛ばして h4 を使っている -->
<h2>HTMLとは？</h2>
<h4>hタグの使い方</h4><!-- よい例 -->
<h2>HTMLとは？</h2>
<h3>hタグの使い方</h3>ブラウザで表示すると、よくない例は「hタグの使い方」の文字が少し小さいだけで、見た目の違いはほとんどありません。違いが出るのは、見出しの階層を使っている場所です。
たとえば、見出しから作られる目次は、次のようになります。
よくない例（h2 のすぐ下が h4）
1. HTMLとは？
（h3 がない）
1. hタグの使い方
よい例（h2 の下が h3）
1. HTMLとは？
1. hタグの使い方目次のプラグインによっては、よくない例の「hタグの使い方」が2段下がって表示されたり、間に空の階層ができたりします。本の目次で、章のすぐ下にいきなり「項」が出てくるようなものです。
画面読み上げソフトも、見出しを「レベル2」「レベル4」のように読み上げたり、見出しをたどってページの中を移動したりします。階層が飛んでいると、「レベル3はどこ？」と構造をつかみにくくなります。見た目では分からないところだからこそ、書くときに意識しておきたいところです。
なお、「節が終わって次の章に移る」ときは、h3 のあとに h2 が来るのは自然です。飛ばしてはいけないのは、細かくする方向に下るときだけです。
② 文字の大きさでタグを選ばない
「この文字を大きくしたいから h2 にしよう」「少し小さくしたいから h4 にしよう」という選び方はしません。文字の大きさや色はCSSで変えます。見出しではない文章を目立たせたいときは、strong（大事な部分）や、div・span で囲んでCSSを当てます（「pタグとdivタグの違い」）。
WordPressでも、テーマの見出しのデザインが好みでないからといってレベルを変えるのではなく、テーマの設定や追加CSSで見た目を変えます。
③ 見出しだけで中身が分かるようにする
見出しは、その章に何が書いてあるかが分かる言葉にします。「はじめに」「ポイント」のような言葉だけより、「順番を飛ばさない」のように中身を表す見出しのほうが、読者が読みたいところを探しやすくなります。
検索エンジンも見出しを手がかりにページの内容を理解するので、読者が探しそうな言葉が自然に入っていると、内容が伝わりやすくなります。ただし、同じ言葉を何度も詰め込むような書き方は、かえって読みにくくなります。
見出しと目次
WordPressの多くのテーマや目次プラグインは、本文の h2 や h3 を拾って、記事の最初に目次を自動で作ります。このブログの記事の最初にある目次も、本文の見出しから作られています。
見出しの階層が整っていれば、目次も章と節がきれいに並び、読者がどこに何が書いてあるかをつかみやすくなります。記事を書いたあとに目次を眺めて、章立てが不自然でないかを確かめるのもよい方法です。
HTML全体の基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」で紹介しています。
まとめ
- h1からh6は、大きさではなく階層（書名・章・節）を表す
- WordPressでは記事のタイトルが h1 なので、本文は h2 から始める
- 細かくするときは順番を飛ばさない。次の章に戻るときは h3 のあとに h2 でよい
- 文字の大きさを変えたいときは、レベルではなくCSSで
- 見出しは中身が分かる言葉にする。目次も見出しから作られる
コメント