HTML見出しタグの使い分けテクニック!<h4>タグはどこで使う?

Webページの作成に欠かせないのが、h1、h2、h3、h4、h5、h6などの見出しタグ。使用するだけで文字の大きさを含めたビジュアルを簡単に変更できますが、意外と使いわけができていないことも・・・

見出しタグ正しい使い分け方を知りたい!

今回は、見出しタグの明確な使い分けテクニックの中から、特にh4タグの

・基本的な使い方
・h4タグと他の見出しタグの違い
・見出しタグの明確な使い分け方

について説明します。

h4タグとは

h4タグの読み方

h4タグは「エイチ4タグ」と読みます。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の見出し要素