【HTML】見出しタグの使い方：h1〜h6はどう使い分ける？

今回はHTMLの見出しタグの使い方について解説します。Webデザイナーだけでなく、Webライターやブロガーは必ずおさえておくべきでしょう。

1. HTMLの見出しタグとは？

見出しは<h1>から<h6>までの6段階です。数字は文字の大きさではなく、文章の階層を表します。見た目の大きさはCSSで変えられます。

◯◯の部分には、見出しの文を書きます。タグにはさまれた部分が見出しとなるわけですね。

1-1. HTMLコードの例

実際にコードを書いてブラウザでの表示を見てみましょう。

HTMLコード

<h1>ｈ１は１番大きい見出し</h1>
<h2>ｈ２は２番目に大きい見出し</h2>
<h3>ｈ３は３番目に大きい見出し</h3>
<h4>ｈ４は４番目に大きい見出し</h4>
<h5>ｈ５は５番目に大きい見出し</h5>
<h6>ｈ６は１番小さい見出し</h6>

ブラウザ表示

この画像は、公開当時にCSSを指定せず表示した例です。ブラウザには見出しの初期スタイルがありますが、文字の大きさや余白はCSSで変更できます。見出しの段階は見た目ではなく、内容の関係で選びましょう。

1-2. 実際の使用例

公開当時のサルワカの記事画面です。記事タイトルに<h1>を使った例を示しています。

記事本文の大見出しはh2タグで書かれています。HTMLコードを見ると<h2>図表を華やかに…</h2>となっているわけですね。

中見出しはh3タグで書かれています。見出しタグを正しく使えば、記事の構成がグッと分かりやすく明確になります。

2. h1〜h6タグの使い分け

見出しは、ページの構成を読み手に伝えるためのものです。見出しをたどる人にも内容が分かるよう、段階を順に使いましょう。

2-1. h1〜h6を使う順番を守る

ページの主題に<h1>を使い、その下の大きな章に<h2>、章の中の節に<h3>を使います。見た目だけを理由に途中の段階を飛ばさず、必要な階層に合わせて選びましょう。

2-2. ページの主題が分かるh1にする

<h1>はページ全体の主題を表します。HTMLで複数の<h1>を使うこと自体は禁止されていませんが、何のページか分かりやすいよう、通常は主題を示す1つの<h1>にまとめるとよいでしょう。詳しくはMDNの見出し要素の説明も参考にしてください。

h1タグをどこに使う？

一般的な構成では、トップページではサイト名や主な内容、記事ページでは記事タイトルなど、そのページの主題を<h1>にします。

これは公開当時のサルワカのトップページです。サイトタイトルを<h1>にした例としてご覧ください。

ブログサービスやCMSでは、テーマが見出しタグを出力している場合があります。記事の編集画面だけで判断せず、公開ページのHTMLも確認してみましょう。

2-3. h2〜h6は内容に合わせて使う

<h2>以降の見出しに決まった回数制限はありません。章や節が必要な場所で、内容の階層に合わせて使います。

2-4. 論理的な記事構成にするコツ

見出しタグを使った理想的な記事構成のイメージを図にしてみました。

文章をいくつかのセクション（章）に分けて、その見出しとしてh2〜h6タグを使うと考えると分かりやすいでしょう。

まず、記事の内容をいくつかの大セクションに分けましょう。大セクションの頭には「h2の大見出し」を書きましょう。その大セクションの中で、さらに内容を分けた方が分かりやすいと感じたら、中セクションを作ります。中セクションの先頭には「h3タグではさまれた中見出し」を書きましょう。さらに細かくカタマリを分けたい場合は、必要に応じてh4、h5タグを使いましょう。

記事の構成例

たとえば、あるサービスの使い方を説明する記事なら、次のように章と節を組み立てられます。

<h2>サービスの概要</h2>
<p>サービスの特徴を説明します。</p>

<h2>主な機能</h2>
<h3>プロフィール</h3>
<h4>ユーザー名</h4>
<p>設定方法を説明します。</p>
<h4>自己紹介文</h4>
<p>書き方を説明します。</p>
<h3>投稿</h3>
<p>投稿方法を説明します。</p>

大きな章に<h2>を置き、その中を分けたいときに<h3>、さらに細かい項目に<h4>を使います。見出しの後には、その項目を説明する文章やリストなどを置きます。

2-5. 見出しの後に内容を置く

見出しだけを並べず、見出しの後にその項目の内容を置きましょう。文章のほか、内容に合うリスト・画像・表なども使えます。

2-6. 画像を見出しに使うとき

見出しは文字で内容が分かる形が基本です。ロゴ画像などを見出しに使う場合は、画像が表示されなくても意味が伝わるよう、適切なaltを付けましょう。

サイトタイトル画像にh1タグを使う場合

たとえばサイト名を表すロゴ画像がページの主題なら、画像のaltにサイト名を書きます。画像の説明ではなく、画像が伝える文字としての役割を表します。

<h1><img src="example.png" alt="サルワカ" /></h1>

2-7. キーワードを無理に詰め込まない

見出しには、その章の内容が分かる言葉を使いましょう。同じ語を不自然に繰り返すより、読み手が見出しを順に追って内容を把握できることを優先します。

2-8. デザインの都合で見出しタグを使わない

「この部分の文字を大きくしたいから」「h3タグの見た目にしたいから」という理由で、見出しタグを使えば記事の論理構成が崩れてしまいます。h1〜h6タグは強調のためではなく「見出し」のために使いましょう。

3. 見出しタグのデザインを変える

CSSによる見出しなどの文字の装飾方法は、こちらの記事でイチから解説しています。

また、下記の記事では、コピペで使える見出しデザインのサンプルをたくさん紹介しています。ぜひ参考にしてみてください。

4. まとめ

見出しは文章の構成を伝える手がかりです。章と節の関係に合わせて<h1>から<h6>を使い、見た目はCSSで整えましょう。

見出し要素とその階層については、MDNの解説も参考になります。