ページの文章を読みやすく整理するために、HTMLには見出しタグという仕組みがあります。見出しタグは「この部分は話題の区切りです」と示す目印で、文章の構造を機械にも人にも分かりやすく伝える役割を持ちます。見出しを正しく付けると、ページ全体の内容が把握しやすくなり、情報を探す人にとっても読み進めやすいページになります。
HTMLにおける見出しタグの基本的な役割
見出しタグとは何か（h1〜h6の考え方）
HTMLの見出しタグは、h1からh6まで6段階あります。数字が小さいほど重要度が高く、一般的にはh1がページの最も大きな主題を表します。h2はその次に大きい話題、h3はh2をさらに細分化した話題、というように階層（かいそう）を作って文章を整理します。ここでいう「階層」とは、親子関係のように大きなテーマの下に小さなテーマをぶら下げていく考え方です。
たとえば、料理レシピのページを想像すると分かりやすいです。ページ全体のテーマが「オムライスの作り方」なら、それがh1に相当します。その下に「材料」「作り方」「コツ」などの大きな区切りをh2として置きます。さらに「作り方」を「下準備」「炒める」「盛り付け」などに分けたいならh3を使います。このように、見出しタグは文字を大きくするための飾りではなく、内容のまとまりを示すための構造づくりの道具です。
また、見出しタグは見た目にも影響します。多くのブラウザではh1が大きく太字、h2がそれより少し小さい、という表示になります。ただし、これは「たまたま標準でそう表示される」というだけで、見出しタグの本当の役割はページ構造の表現です。見た目の大きさを調整したい場合は、CSSという仕組みを使います。CSSは「見た目（デザイン）を指定するための言語」で、HTMLの内容（意味）とは役割が違います。
見出しがあると何が良いのか（読む人・作る人のメリット）
見出しを正しく付けると、読む人にとって「今どの話題を読んでいるのか」「次に何が書かれているのか」がひと目で分かります。特に長いページでは、見出しがないと文章が一続きに見えてしまい、必要な情報を探しにくくなります。反対に、見出しが適切だと、ざっとスクロールするだけで内容の全体像をつかめます。
作る人にとってもメリットがあります。見出しを基準にして文章を組み立てられるので、構成が整理され、書き漏れや重複が減ります。さらに、後から修正するときにも「この見出しの部分だけ直そう」と切り分けやすくなります。チームで制作する場合も、見出しが整っていると他の人が理解しやすく、引き継ぎが楽になります。
見出しタグは「順番」が重要（構造が崩れる例）
見出しタグで特に大切なのは、数字の順番を意識して階層を作ることです。よくあるミスとして、見た目を理由にいきなりh4を使ったり、h2の次にh5を置いたりするケースがあります。こうした飛び級は、文章の構造が不自然になりやすいです。
たとえば、h2の次に突然h4が出てくると、「h3にあたる中見出しが省略されているのかな？」と読み手も機械も判断しづらくなります。もちろん、内容によってはh3が不要な場合もありますが、その場合はh2の下は段落（pタグなど）で説明を補い、必要になったタイミングでh3を使う、という流れにするのが自然です。
見出しタグは「ページのアウトライン（骨組み）」を作ります。アウトラインとは、ページを見出しの一覧にしたときに現れる、章立てのような構造のことです。アウトラインがきれいに作られていると、ページが論理的に整理されている印象になります。
初心者が押さえるべき使い分けのポイント
初心者のうちは、次のような考え方で見出しを付けると迷いにくいです。
- h1は基本的にページに1つ（ページの主題）
- 大きな区切りはh2（章のイメージ）
- h2の中を分けるならh3（節のイメージ）
- h3の中をさらに分ける必要が出たらh4（より細かい話題）
このとき、h4は「小さな見出しだから何となく付ける」ものではなく、「h3の下でさらに話題を整理したい」という目的があるときに使います。つまり、h4は単独で突然登場するより、上位の見出し（h2やh3）が先に存在している状態で活躍しやすいタグです。
見出しを付けるときは、見た目ではなく「この文章はどの話題の下にあるのか」を考えてください。そのうえで、見た目の調整が必要ならCSSで行う、という分担にするとHTMLがきれいに保てます。
h4タグの意味とHTML内での位置づけ
h4タグは、HTMLの見出しタグ（h1〜h6）のうち4番目の階層を表すタグです。見出しタグは文章の構造を表現するためのもので、h4は「h3で示した話題を、さらに細かく分けたいとき」に使うのが基本です。見た目を小さくするための道具ではなく、情報を整理して読みやすくするための“段階”を示す役割を担います。
h4が表す「階層」とは何か
h4の理解で大事なのは、「階層（かいそう）」という考え方です。階層とは、話題の大きさに応じて章・節・項目のように段を作ることです。たとえば学校のノートで、いきなり細かい箇条書きから書き始めると全体像がつかみにくいですよね。まず大きなタイトルがあり、その下に中くらいの見出し、小さな見出しがぶら下がっていると読みやすくなります。HTMLの見出しタグも同じ考え方です。
- h1：ページ全体の最重要テーマ（大タイトル）
- h2：大きな話題の区切り（章）
- h3：h2をさらに分けた話題（節）
- h4：h3をさらに分けた話題（項目）
このように、h4は「h3の内側で使う」ことが自然です。言い換えると、h4は単独でいきなり登場するよりも、上位の見出し（h2やh3）がすでに存在しているときに意味がはっきりします。
h4は「小見出し」だが「飾り」ではない
h4はよく「小見出し」と呼ばれます。ただし、ここでいう小見出しは“文字を小さくする”という意味ではなく、“話題の単位が小さい”という意味です。初心者の方がやりがちな誤解として、「この文章はそんなに重要じゃないからh4にしておこう」「文字を少し小さくしたいからh4にしよう」という使い方があります。しかし、見出しタグはデザインを調整するための機能ではありません。
HTMLは「文章の意味や役割を表す言語」です。つまり、h4を付けることは「この部分は、h3の下に属する見出しです」と宣言するのと同じです。もし見た目だけを理由にh4を選ぶと、文章の構造が実態と合わなくなり、読み手にとっても分かりにくくなります。
見た目の調整にはCSSを使います。CSSは「見た目（文字サイズ、色、余白など）を指定する仕組み」です。役割が違うものを混ぜてしまうと、後から修正するときに混乱が増えます。たとえば「h4にしたのは見た目を小さくしたかっただけ」という状態だと、構造としてはh4が適切でないため、ページの整理の仕方そのものが崩れてしまいます。
h4の典型的な使いどころ（具体イメージ）
h4が活躍するのは、「説明をさらに細かい観点で区切りたい」ときです。たとえば、学習記事の構成を想像してみてください。
- h2：HTMLの基本
- h3：タグとは何か
- h4：開始タグと終了タグ
- h4：属性（ぞくせい）の考え方
- h3：タグとは何か
ここでいう「属性」とは、タグに追加情報を付けるための仕組みで、例として <a href="..."> の href のような部分を指します。こうした“h3の中で話題が2つ以上に分かれる”ような状況では、h4を使うと読みやすさが上がります。
また、手順説明でもh4は便利です。
- h2：フォームの作り方
- h3：入力欄の種類
- h4：テキスト入力
- h4：メール入力
- h4：パスワード入力
- h3：入力欄の種類
このように、同じカテゴリの中で複数の小テーマを並べたい場合、h4を使うことで“同格の小テーマ”として整理できます。
h4を使う前に意識したいチェックポイント
h4を使うか迷ったら、次の点を確認すると判断しやすいです。
- そのh4の上に、対応するh3（または少なくともh2）が存在しているか
- その見出しは、上位の話題を「さらに分けたもの」になっているか
- h4の下に説明文（段落など）があり、見出しとして機能しているか
- 見た目を変えたいだけでh4を選んでいないか
特に最後のポイントが重要です。見出しタグは“文章の地図”を作ります。地図の目印が適切でないと、道に迷いやすくなります。h4を正しく位置づけて使えるようになると、ページ全体の構造が整い、読みやすいHTMLに近づきます。
h4タグを使った文章構造の作り方
h4タグは、HTMLの見出し構造をより細かく整理するための部品です。h2やh3だけでも多くのページは作れますが、説明が長くなったり、同じ種類の話題が複数並んだりすると、h3の下をさらに分割したくなる場面が出てきます。そこでh4を使うと、情報のまとまりがはっきりし、読む人が「今どの話題の中の、どの小テーマを読んでいるのか」を迷いにくくなります。
「大→中→小→さらに小」の考え方で設計する
文章構造を作るときは、いきなりh4から考え始めるのではなく、まず全体のテーマを決めてから段階的に分けていくのがコツです。実際の制作では、次のような流れで整理すると初心者でも崩れにくいです。
- まずページ全体のテーマ（h1に相当）を一言で決める
- そのテーマを大きな章に分ける（h2に相当）
- 各章を、説明のまとまりで分ける（h3に相当）
- h3の中で、さらに並列の小テーマが2つ以上ある場合にh4を検討する
ここで「並列（へいれつ）」とは、同じレベルで並ぶ関係のことです。たとえば「メリット」と「デメリット」は同じ種類の話題なので並列になりやすいです。こうした並列の小テーマをh4で整理すると、読み手は比較しやすくなります。
たとえば「学習方法」というh3があり、その中で「動画で学ぶ」「本で学ぶ」「手を動かす」と複数の観点があるなら、それぞれをh4にする、といった設計が考えられます。重要なのは、h4は“h3をさらに分割した結果”として登場する、という順番です。
h4を入れる判断基準（分けすぎを防ぐ）
h4は便利ですが、増やしすぎると逆に読みにくくなることもあります。文章構造は「細かくすれば良い」というものではなく、「読む人が理解しやすい単位で区切る」ことが目的です。そこで、h4を入れるか迷ったときの判断基準を持っておくと失敗しにくいです。
- そのh3の下に、明確に異なる小テーマが2つ以上ある
- 小テーマごとに、最低でも2〜3文程度の説明が必要になる
- 小テーマ同士を分けないと、話が混ざって理解しにくい
- 見出しが増えることで、目次やスクロール時の見通しが良くなる
逆に、次のような場合はh4を無理に入れない方が自然です。
- 1〜2行程度で終わる短い補足しかない
- 単に箇条書きで並べれば足りる内容
- 小テーマが実は同じ話題の言い換えで、分ける必要がない
h4を使うと、見出しが増えて画面上の“区切り”が多くなります。区切りは読みやすさに直結しますが、多すぎると全体が細切れになって流れがつかみにくくなるため、適度な粒度を意識することが大切です。
h4の下に置くべき内容（本文・例・補足の置き方）
h4を使った文章構造をきれいに見せるには、h4の下に置く内容の種類を決めておくと整理しやすいです。よくある構成としては、次のような並べ方が使いやすいです。
- h4：小テーマの名前
- 説明文（段落）で概要を書く
- 必要に応じて箇条書きで要点を並べる
- 具体例（短い例示）を入れて理解を助ける
たとえば「入力フォームの種類」というh3があって、「テキスト入力」「メール入力」「パスワード入力」をh4として並べるなら、それぞれのh4の下に「何のために使うのか」「どんな場面で必要か」を説明します。さらに「よくある使い方」を箇条書きにすると、初心者でもイメージしやすくなります。
このとき注意したいのは、h4の下に何も説明がない状態を作らないことです。見出しは“内容の予告”なので、その直後に本文がないと読者は置いてけぼりになりやすいです。短くてもよいので、h4の下には必ず説明を付ける意識を持つと、構造が安定します。
文章構造を保つための実務的な工夫
実際にHTMLを書きながら構造を作るときは、次のような工夫が役立ちます。
- 先に見出しだけを並べて、骨組みを作ってから本文を書く
- h2〜h4の見出し文は、内容を見ただけで違いが分かる言葉にする
- 同じ階層の見出しは、文体や粒度（細かさ）を揃える
- 途中で「このh4、本当に必要？」と見直す時間を取る
特に「骨組みを先に作る」は効果が大きいです。見出しだけを並べると、ページの流れや漏れが目で確認できます。たとえばh4が突然現れていたら「上位のh3が足りないかも」と気づけますし、h4が多すぎて一覧が読みにくいなら「h3でまとめ直せるかも」と修正の判断ができます。
h4タグは、文章を“細かく分けられる自由”がある一方で、使い方を誤ると構造が複雑になりがちです。だからこそ、目的は「読みやすさの向上」であることを忘れず、必要なところにだけh4を置く設計を心がけてください。
h4タグを使用する際の正しい順序とルール
h4タグを正しく使うためには、「見出しは階層である」という前提を守ることが重要です。見出しタグはh1〜h6まであり、数字が小さいほど上位（大きなテーマ）を表します。h4は4番目の階層なので、基本的にはh3の下に置かれるべき見出しです。ここを意識すると、ページ全体の構造が崩れにくくなり、読み手も内容を追いやすくなります。
基本ルール：飛び級を避けて階層をつなげる
h4を使うときの最重要ルールは、見出しの階層を飛び級しないことです。飛び級とは、たとえばh2の次にいきなりh4を置くような状態を指します。もちろんHTMLとしては表示されますが、構造としては「h3に相当する話題が抜けている」ように見えやすく、読みやすさが落ちる原因になります。
一般的に、次のような順番で階層を積み上げます。
- h1：ページの主題
- h2：大きな区切り
- h3：h2の中の区切り
- h4：h3の中のさらに細かい区切り
もしh2の直下をさらに分割したいなら、まずh3を使うのが自然です。h4は「h3の下で、複数の小テーマを整理したい」ときに登場します。言い換えると、h4は“単体で置くもの”というより、“上位見出しがあってこそ意味がはっきりするタグ”です。
また、h4を使ったあとに、急にh2へ戻ること自体は問題ではありません。大きな章（h2）が次に進むだけだからです。ただし、h4の下に説明文がなく、見出しだけが続いていると構造が不自然になります。見出しの直後には、その見出しの内容を説明する本文を入れる、という基本も合わせて守ると読みやすくなります。
ルール：同じ階層は「同格の話題」にそろえる
見出し構造をきれいに保つコツとして、「同じ階層の見出しは、同格（どうかく）の話題にそろえる」ことが挙げられます。同格とは、重要度や話題の大きさが同じくらいという意味です。
たとえば、あるh3の下にh4を3つ置くなら、その3つはだいたい同じ粒度（細かさ）で並べるのが理想です。ここで粒度とは、「どれくらい細かい単位で説明しているか」を表す感覚です。具体例を出すと、「メリット」「デメリット」「注意点」のように並べるのは粒度が近いので読みやすいです。一方で、「メリット」「注意点」「具体的な実装手順（非常に長い説明）」のように、1つだけ極端に重い内容が混ざると、構造がアンバランスになりやすいです。その場合は、内容が重いものはh3に格上げして章立てを見直す、といった調整が向いています。
また、同じ階層の見出し文（見出しの文章）も、文体をそろえると見通しが良くなります。たとえば、見出しが「〜とは」「〜の使い方」「〜の注意点」のように形がバラバラだと、一覧で見たときに把握しづらくなります。初心者のうちは、次のようにそろえるだけでも効果があります。
- 「〜の特徴」
- 「〜の使い方」
- 「〜の注意点」
ルール：見出しは内容のラベルなので「見た目のため」に選ばない
h4を含む見出しタグは、デザインのために選ぶものではありません。HTMLは文章の意味を表すための言語なので、見出しタグは「この内容はどの階層の話題か」を示すラベルになります。もし「文字が小さく表示されるからh4にしよう」と考えてしまうと、構造が本来の内容とズレてしまいます。
見た目を整えるにはCSSを使います。CSSは「見た目を指定する仕組み」で、文字サイズや余白、色などを調整できます。つまり、役割分担としては次のようになります。
- HTML：何が見出しで、何が本文か（意味・構造）
- CSS：どの見出しをどれくらいの大きさで表示するか（見た目）
この分担を守ると、後からデザイン変更するときにHTMLをいじらずに済みます。逆に、見た目の都合でh4を乱用してしまうと、デザイン変更のたびに構造そのものを直す必要が出てきてしまいます。
ルール：h4の下には「説明の本文」を置いて情報を完結させる
見出しを置いたら、その下に必ず本文を置く、というルールも実務では重要です。見出しは「ここからこの話をします」という宣言なので、宣言だけして説明がないと、読む人は「結局何が言いたいの？」と感じやすくなります。
h4の下に置く本文は、長文である必要はありません。ただし、最低限以下のどれかを入れると、見出しとして機能しやすいです。
- 2〜3文の説明（段落）
- 箇条書きで要点
- 短い例（例示）
さらに、h4が複数並ぶ場合は、各h4の本文量をある程度そろえると、読む人がリズムよく読めます。あるh4だけ本文が極端に短い、あるいは極端に長い場合は、見出しの階層を見直すサインになります。
実務で役立つチェック方法（自分で崩れを見つける）
h4の順序やルールを守れているかは、次のようなチェックで見つけやすくなります。
- 見出しだけを抜き出して読んでも、内容の流れが分かるか
- h2→h3→h4の順番が自然につながっているか
- h4が突然現れていないか（上位見出しがあるか）
- 同じ階層の見出しが同格の話題になっているか
見出しだけで流れが分かる状態は、文章構造が整っている可能性が高いです。逆に、見出しだけ読むと「話が飛ぶ」「同じ話が繰り返される」「急に細かくなる」と感じる場合は、h4の使い方や階層の切り方を見直すと改善しやすいです。
h4タグとデザイン調整の関係
h4タグは見出しの階層を表すためのHTML要素であり、デザイン調整（見た目の変更）のために使うものではありません。ただし現実のWeb制作では、「見出しを入れたら文字が大きくなった」「余白が広い」といった見た目の変化が起きるため、h4とデザインが関係しているように感じやすいです。ここでは、h4の役割を守りながら、どのように見た目を整えるべきかを整理します。
HTMLとCSSの役割分担を理解する
まず大前提として、HTMLとCSSは担当が違います。
HTMLは「文書の構造や意味」を表します。たとえば「ここは見出しです」「ここは段落です」といった情報をブラウザに伝えます。一方でCSSは「見た目を指定する仕組み」です。文字の大きさ、色、行間、余白などを調整します。初心者の方はこの役割分担が曖昧なまま進むと、後から修正が大変になりやすいです。
h4について言うと、HTMLとしての意味は「4番目の階層の見出し」です。にもかかわらず、「文字が小さく見えるからh4にする」「目立たせたくないからh4にする」といったデザイン目的で選ぶと、文書構造がねじれてしまいます。すると、後でページを読み返したときに見出しの流れが不自然になり、「なぜここがh4なのか」が説明できなくなります。
役割分担を守るための基本姿勢は次の通りです。
- 見出し階層は内容の構造で決める（h2なのかh3なのかh4なのか）
- 文字サイズや余白はCSSで調整する（見た目を整える）
この2点を分けて考えると、h4の使い方が安定します。
ブラウザの標準スタイルに引っぱられない
h4を含む見出しタグは、ブラウザが標準のスタイル（初期状態の見た目）を持っています。多くの環境で、見出しタグには太字や上下の余白が付いたり、文字サイズが変わったりします。これが「h4を使うと見た目が変わる」と感じる理由です。
ただし、これはHTMLの仕様として「必ずこの見た目にしなさい」と決まっているわけではなく、ブラウザ側が“読みやすい初期設定”として用意しているだけです。つまり、見た目はCSSでいくらでも変更できます。ここを理解していないと、「見た目を変えたいから見出しタグを変える」という逆方向の発想になってしまいます。
たとえば、次のような状況がよくあります。
- 本当はh3にしたいが、h3だと大きすぎるからh4にした
- 本当はh4にしたいが、h4だと小さすぎるからh3にした
こうした判断は、構造と見た目を混ぜてしまっている状態です。本来は「構造としてh3が正しいならh3を使い、サイズが合わないならCSSでサイズを調整する」が筋の通ったやり方です。
h4の見た目をCSSで調整する際の考え方
h4のデザインを調整するときは、「一時的にそれっぽく見せる」ではなく、「サイト全体として一貫したルールを作る」という発想が大切です。理由は単純で、同じh4がページごとに違う見た目だと、読み手が混乱しやすいからです。
初心者が意識すると良い観点は次の通りです。
- 文字サイズ：h3より少し小さく、本文よりは目立つ
- 太さ：本文より強く、上位見出しより控えめ
- 余白：見出しの上下に適度な間隔を入れて区切りを分かりやすくする
- 行間：複数行になっても詰まりすぎないようにする
ここで「余白」は、要素の周りの空間のことです。余白を適切に取ると、見出しと本文の境目が分かりやすくなります。逆に余白が多すぎると、内容が間延びして見えることがあります。h4は細かい区切りとして使われることが多いので、上位見出し（h2やh3）より余白を控えめにして“細かい区切り感”を出す、という考え方がよく使われます。
また、h4だけを整えるのではなく、h2→h3→h4の流れとして「段階が視覚的に伝わる」ように調整するのが理想です。見た目に段差があると、読む人は自然に情報のまとまりを理解できます。
デザイン都合でh4を選ばないための実践ルール
実務で迷わないために、次のようなルールを自分の中に持っておくと便利です。
- 「この見出しは何の下に属するか」を先に決めてからタグを選ぶ
- 文字サイズの希望はCSS側で調整する前提で考える
- h4を使う理由を言葉で説明できる状態にする（例：h3の中の小テーマだから）
- 見出しの階層が深くなりすぎたら、そもそもの構成（章立て）を見直す
特に最後の「深くなりすぎたら構成を見直す」は重要です。h4が増えると細かく整理できる一方、h4の下にさらに細分化したくなってh5、h6と深くなり、結果として全体像が見えにくくなることがあります。その場合は、見出しを増やすよりも、上位の章立てを整理して、h3の粒度でまとめ直す方が分かりやすいことも多いです。
h4タグのよくある間違いと注意点
h4タグは文章を整理するうえで便利ですが、初心者の方ほど「見た目」と「構造」を混同しやすく、結果としてページの構造が崩れてしまうことがあります。h4は“4番目の階層の見出し”という意味を持つため、使い方を誤ると、読み手にとっても作り手にとっても分かりにくいHTMLになりやすいです。ここでは、現場でも起きやすいミスを具体的に押さえ、どう避ければよいかを整理します。
間違い1：文字を小さくしたいからh4を選ぶ
最も多いのが、「h4は小さく表示されるから」という理由で使うケースです。確かにブラウザの標準表示では、h1が大きく、h4はそれより小さく表示されることが多いです。しかし、それはあくまで初期の見た目の話で、h4の本来の役割は「h3の下位見出し」であることを示す点にあります。
この誤りが怖いのは、後からページを読み直したときに、構造が意味不明になりやすいことです。たとえば本来はh2相当の内容なのに、見た目の都合でh4にしてしまうと、ページ内の“章立て”が崩れます。すると、同じレベルの話題が別の階層に散らばり、読み手は重要度の判断がしづらくなります。
避け方としては、まず「この見出しはどの話題の下に属するか」を決め、階層でh2/h3/h4を選びます。見た目の大きさはCSSで調整する、という分担を徹底するのが最も確実です。CSSは「見た目を指定する仕組み」で、文字サイズや余白などを自由に変えられます。
間違い2：h2の直後にいきなりh4を置く（飛び級）
次によくあるのが、見出しの飛び級です。たとえば「大きな見出し（h2）」の次に、いきなり「h4」を置くようなパターンです。HTMLとしては表示されますが、構造としては「h3が抜けている」状態になり、読み手にとって話の流れが不自然に感じられやすいです。
飛び級が起きる典型的な理由は2つあります。
1つ目は、単に階層の考え方がまだ身についていないこと。
2つ目は、h3だと見た目が大きいからh4にした、というデザイン理由です。
避け方はシンプルで、「段階を踏む」ことです。h2の下を分けたいならh3、h3の下を分けたいならh4、という順序を基本にします。もし「h2の下だけれど、内容が少し軽い」という場合でも、階層は内容の関係で決め、軽さや文字サイズはCSSで調整します。
間違い3：h4を多用して階層が深くなりすぎる
整理のつもりでh4を増やしすぎると、ページが細切れになって逆に読みづらくなることがあります。h4は“細かい区切り”に向いていますが、細かくしすぎると「何が重要で、何が補足なのか」が見えにくくなります。
特に注意したいのは、次のような状態です。
- h4が連続し、どれも1〜2行程度の説明しかない
- h4の下にさらにh5やh6を使い始め、構造が深くなっていく
- 見出しの数は多いのに、各見出しの中身が薄い
こうなると、見出しが「情報の目印」ではなく「ページを分断する壁」になってしまいます。避け方としては、h4を使う前に「h3の本文を箇条書きで整理するだけで済まないか」を検討するのが有効です。箇条書きは同じ話題の中で要点を並べるのが得意なので、見出しを増やすより自然に読める場合があります。
また、h4を使うなら、その下には最低限の説明量（たとえば2〜3文）を確保し、見出しとして成立させる意識を持つと、無駄な分割を減らせます。
間違い4：同じ階層の見出しが同格になっていない
見出しは「同じ階層なら同じくらいの話題の大きさ」にそろえるのが基本です。しかし初心者の方は、h4にいろいろな種類の情報を詰め込みがちです。たとえば、同じh3の下に次のようなh4が並ぶと違和感が出やすいです。
- h4：メリット（短い説明）
- h4：デメリット（短い説明）
- h4：実装手順（とても長い手順と細かい補足が続く）
「実装手順」だけ内容が重く、同格の小テーマに見えなくなります。この場合、実装手順はh3に格上げする、あるいは実装手順の中をh4で分割するなど、構成の再設計が必要です。
避け方は、見出しだけを抜き出して読んでみることです。見出し一覧だけで内容の流れが自然に理解できるなら、階層が整っている可能性が高いです。逆に、見出し一覧で「急に細かい」「急に重い」「話題の種類がバラバラ」と感じたら、同格性が崩れているサインです。
間違い5：h4の直後に本文がなく、見出しだけが続く
h4に限らず、見出しの直後には本文を置くのが基本です。見出しは「ここからこの話をします」という宣言なので、その説明が続かないと読み手は混乱します。特にh4が連続していると、読み手は「どこが本文なのか」を見失いやすくなります。
避け方としては、h4の下に必ず以下のいずれかを置くようにします。
- 概要説明の段落（2〜3文）
- 要点の箇条書き
- 短い例示
また、h4の本文量をある程度そろえると、ページを読んだときのリズムが整います。あるh4だけ極端に短い場合は、そもそも見出しにする必要があるか、本文に吸収できないかを検討すると良いです。
h4タグを使った実践的なHTML記述例
h4タグを実務で活用するには、「どの階層の話題として置くのか」を決めたうえで、h2→h3→h4の流れを崩さずに記述することが大切です。ここでは、初心者でもイメージしやすいように、学習記事や案内ページでよくある構造を例にしながら、h4の使い方を具体的に紹介します。コード例はHTMLのみを扱い、見た目の調整はCSSで行う前提として、まずは“構造が正しいか”に集中します。
例1：学習記事の構造でh4を使う（用語を細分化する）
学習記事では、ある章の中で複数の小テーマを並べたくなることが多いです。たとえば「HTMLの基本」という章（h2）の中で、「タグの基本」（h3）を説明し、その中で「開始タグと終了タグ」「属性」といった小テーマを分けたいケースです。このときh4を使うと、話題の区切りが明確になります。
<h1>HTML入門</h1>
<h2>HTMLの基本</h2>
<p>HTMLはWebページの構造を作るための言語です。文章の意味やまとまりをタグで表現します。</p>
<h3>タグとは何か</h3>
<p>タグは文章や要素に役割を与えるための記号です。多くの場合、開始タグと終了タグで囲みます。</p>
<h4>開始タグと終了タグ</h4>
<p>開始タグは要素の始まりを示し、終了タグは要素の終わりを示します。たとえば段落を表す場合はpタグを使います。</p>
<h4>属性（ぞくせい）</h4>
<p>属性はタグに追加情報を付けるための仕組みです。リンク先の指定などに使われます。</p>ここで「属性（ぞくせい）」は、タグに対して追加情報を与える部分のことです。たとえばリンクの行き先を指定するなど、要素をより具体的に動かすために使われます。ポイントは、h4が“h3の話題をさらに分ける”位置で使われていることです。いきなりh4から始めるのではなく、上位見出しがある状態で登場しているため、構造が自然になります。
例2：FAQ形式でh4を使う（同格の質問を並べる）
よくあるページとして、FAQ（よくある質問）があります。FAQの章をh2にし、カテゴリをh3にし、そのカテゴリ内の個別の質問をh4にすると、質問が一覧として整理しやすくなります。
<h1>サービス案内</h1>
<h2>よくある質問</h2>
<p>お問い合わせの多い内容をまとめています。該当する質問をご確認ください。</p>
<h3>料金について</h3>
<p>料金に関する代表的な質問です。</p>
<h4>支払い方法は何がありますか？</h4>
<p>クレジットカードや銀行振込など、複数の方法に対応しています。</p>
<h4>領収書は発行できますか？</h4>
<p>発行できます。手続きの方法はマイページから確認できます。</p>
<h3>利用開始について</h3>
<p>登録や利用開始のタイミングに関する質問です。</p>
<h4>登録してすぐに使えますか？</h4>
<p>登録完了後、すぐに利用を開始できます。</p>この例の良い点は、同じ階層（h4）に「質問」がそろっていることです。見出しは同じ階層なら同格の話題にそろえるのが基本なので、FAQのような並列の項目はh4と相性が良いです。また、h4の直後に必ず説明文（本文）があり、見出しだけが並ぶ状態になっていない点も実用的です。
例3：手順説明でh4を使う（工程を整理する）
手順説明では、「大きな流れ（h3）」の中に、いくつかの工程があり、それぞれの工程に注意点や目的があることが多いです。こうした工程をh4で分けると、読む人は「今どの工程の説明なのか」を把握しやすくなります。
<h1>お問い合わせフォームの作り方</h1>
<h2>作成手順</h2>
<p>フォームを作る流れを、工程ごとに分けて説明します。</p>
<h3>入力欄を用意する</h3>
<p>利用者が情報を入力できるように、必要な入力欄を設計します。</p>
<h4>名前の入力欄</h4>
<p>名前は必須項目にすることが多いです。入力しやすいラベルを付けます。</p>
<h4>メールアドレスの入力欄</h4>
<p>返信が必要な場合はメールアドレスが重要です。入力ミスを減らす工夫も検討します。</p>
<h3>送信ボタンを用意する</h3>
<p>入力内容を送信するためのボタンを設置します。</p>
<h4>ボタンの文言</h4>
<p>「送信」「確認」など、利用者が次の動作を理解しやすい文言にします。</p>この例でも、h4はh3の下にあり、工程の中の具体的な要素を分けています。手順の粒度（細かさ）が増えるほど、h4があると読みやすくなります。ただし、工程が少ない場合はh4を使わず、h3の本文内で箇条書きにした方が自然な場合もあります。必要なときにだけh4を使う姿勢が大切です。
例4：h4を使うべきでないケースをあえて示す（判断力を付ける）
最後に、「やりがちだけれど避けたい例」を示します。見た目の都合でh4を使ってしまうと、構造が崩れます。
<h1>ブログ記事タイトル</h1>
<h2>本文の章</h2>
<h4>いきなり小見出し</h4>
<p>h3がないのにh4が登場すると、構造が不自然になりやすいです。</p>この場合は、内容が「本文の章（h2）」の直下にある話題なら、まずh3にするのが自然です。もし「h3だと大きい」と感じるなら、CSSでh3の見た目を調整します。タグ選択は構造、見た目はCSS、という分担を守ることが、実務でも修正しやすいHTMLにつながります。
まとめ
この記事では、HTMLの見出しタグの役割を「文章の構造を示すもの」として捉え、特にh4タグを正しく扱うための考え方と実践方法を整理しました。見出しは文字を大きくしたり小さくしたりするための飾りではなく、ページの話題を階層で整理し、読む人が迷わず内容を追えるようにするための仕組みです。h4はその中でも4番目の階層として、h3の話題をさらに細かく分割したいときに活躍します。
h4タグの役割と階層の基本
h4タグは「h3の下位にある小テーマ」を示す見出しです。h1〜h6は数字が小さいほど上位のテーマを表し、基本はh1→h2→h3→h4の順に階層を積み上げます。h4を使うときは、上位見出し（h2やh3）が存在し、その中をさらに分ける必要がある場面であることが前提になります。見出しの階層が整っていると、ページの骨組みが明確になり、内容の全体像をつかみやすくなります。
正しい使い方の軸と注意点
h4を適切に使うには、次の軸を守ることが重要です。
- 見出しの順番を飛び級しない（例：h2の直後にh4を置かない）
- 同じ階層の見出しは同格の話題にそろえる
- h4の直後には説明文を置き、見出しだけが続く状態を避ける
- 見た目を理由にh4を選ばず、構造でタグを決める
特に初心者が陥りやすいのは、文字サイズを調整したい気持ちからh4を選んでしまうことです。この場合、構造が崩れて後から読み直したときに意図が分からなくなりやすいです。
デザイン調整はCSSで行うという分担
HTMLは意味と構造を担当し、CSSは見た目を担当します。h4を含む見出しタグはブラウザの標準スタイルで大きさや余白が変わるため、デザインと結びついて見えますが、タグ選択で見た目を調整するのは避けた方が安全です。構造としてh3が正しいならh3を使い、表示サイズや余白の調整はCSS側で行う、という分担を徹底すると、修正や拡張がしやすいページになります。
実践で使える構成パターン
h4は、学習記事で用語や観点を細分化するとき、FAQで同格の質問を並べるとき、手順説明で工程を分けるときなどに向いています。いずれのパターンでも共通するのは、h4が「h3の下で複数の小テーマを整理する役割」を果たしていることです。見出しだけを抜き出して読んでも自然な流れになっているかを確認すると、構造が適切かどうか判断しやすくなります。