Webページの作成に欠かせないのが、h1、h2、h3、h4、h5、h6などの見出しタグ。使用するだけで文字の大きさを含めたビジュアルを簡単に変更できますが、意外と使いわけができていないことも・・・
今回は、見出しタグの明確な使い分けテクニックの中から、特にh4タグの
・h4タグと他の見出しタグの違い
・見出しタグの明確な使い分け方
について説明します。
目次
h4タグとは
h4タグの読み方
h4タグは「エイチ４タグ」と読みます。h4のhは”Heading”の頭文字で、見出しという意味があります。
h4タグの説明
h4タグは見出しタグの中でも4段階目の見出しを表すタグで、見出しタグのなかでも4番目に大きな文字として表記されます。
ちなみに見出しタグはh1~h6までの6種類のみ。それ以前、以降のタグは存在しませんので注意しましょう。h1が一番大きく、h6タグが一番小さくなります。
See the Pen
h1~h6 by rabbittyu (@rabbittyu)
on CodePen.
h4タグで利用できる属性
h4タグでは以下のグローバル属性（全てのタグで使用可能な属性）のみが使用可能です。
| 属性 | 説明 |
|---|---|
| accesskey属性 | キーボードのショートカットの生成し、簡易なアクセスを可能にする |
| class属性 | 要素に任意の名称を与える（同じclass名を複数の要素に与えられる） |
| dir属性 | テキストの書字方向を示す ・ltr：「left to right」左から右 ・rtl：「rght to left」右から左 ・auto：自動的に書字方向を決定する |
| hidden属性 | 要素に関連性がないことを示す |
| id属性 | 要素に任意の名称を与える（同じidは使用できない：一意性） |
| lang属性 | 要素の言語を定義する |
| style属性 | 要素にCSSスタイル宣言を適用する |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
h4タグの基本的な使い方
h4タグの使い方
では早速h4タグの実際の使い方を見ていきましょう。h4タグの本質を探るには、実際にどんな風に使われているのかを見るのが一番です。サンプルサイトを用意したので、サンプルサイトをもとに動作を確認していきましょう。
See the Pen
サンプルサイト by rabbittyu (@rabbittyu)
on CodePen.
このページでは、朝食の種類ごとに+αとして付帯情報を付ける際に「h4」タグを使用しています。見出しタグは、必ず数字が連続になるように使用します。h2タグからいきなりh4タグに飛ぶことがないよう、注意してください。
またページの中でh1タグは1つだけ使用することが推奨されています。多くのサイトでは、サイト名を表す部分など、ページ内でひとつだけ登場する重要な情報にh1タグを使用しています。その他のタグは複数使用可能。使い方に正解はありませんが、読みやすさを常に意識し、バランスよく、ブロックごとに整合性が取れるように配置しましょう。
h4タグと類似する要素との違い
見出しタグはh1~h6まであり、それぞれ見出しを意味するタグです。h4タグとその他の見出しタグとの違いは、文字のサイズだけではなく、情報の重要性や目立ち方にも違いがあります。
新聞を想像していただければわかりやすいと思いますが、一面の大見出しは直近の一番重要な記事を表しています。逆に重要性の低い記事は、見出しが小さめに設定されていますが、この法則は見出しタグにも応用可能です。
重要な情報など、特に伝えたい情報はh2~h3タグを、補足情報などはh4~h6タグを使用すると良いでしょう。
h4タグの具体的な使い方
では今回のサンプルページでは、どのようにh4タグを使用したのか、詳しく解説していきます。まず押さえておきたいのが、見出しタグは入れ子構造になっているということです。
h1タグが全ての要素を覆っていて、その次にh2タグを複数配置。h2タグの中にはh3タグを。h3タグの中にはh4タグをというように、見出しタグの中に見出しタグを入れて、どんどん情報を付け加えていきます。
この入れ子構造を意識できれば、情報の重要性などに惑わされることなく、簡単に見出しタグを使い分けることができます。この入れ子構造がなく、全て同じ見出しタグで記述してしまうと、記事の読みやすさが著しく低下しますので注意が必要です。
まとめ
今回は見出しタグの中から「h4」タグについてご紹介しました。h4タグは付帯する情報に付けるというポイントを押さえておけば、上手く使い分けられるでしょう。
見出しタグはうまく使い分けることで、記事の読みやすさやまとまりを一気に向上させるタグでもあります。しっかり重要点を押さえ、自由自在に使い分けられるようにしてみてくださいね。
見出しタグのポイント
・h1タグはページ内で一回のみ使用
・見出しタグはh1→h2→h3→h4→h5→h6と順になるように記述する
・見出しタグは情報の重要性によって使い分ける
・入れ子構造にして使用することで、記事の可読性を向上できる
参考文献：
【HTML】見出しタグの使い方：h1~h6はどう使い分ける？ – サルワカ
CODE KITCHEN
MDN web docks <h1>-<h6>: HTMLの見出し要素
