「h1が一番大きくて、h6にいくほど小さくなる」。HTMLを覚え始めた時期にそう理解したまま、見出しを文字サイズの段階として使っている方は多いはずです。入門書の解説もエディタの見出しボタンも、押した瞬間に文字が大きくなる見た目から入るため、そう受け取るほうがむしろ自然でしょう。
しかし、記事を書いてCMSに入稿するところまで数多く手がけてきた弊社の立場から言えるのは、見出しタグが決めているのは文字の大きさではなく文書の区切りだということ。色も線も余白もすべてCSSに渡してしまい、HTML側にはレベルだけを残す。この分け方を最初に選んでおくと、デザインを変えるときに本文へ手を入れずに済みます。
本記事では、h1からh6の書き方と使い分けから、CSSで装飾を作る手順、見出しの文言をどう決めるかまで、記事を作って入稿する側の視点で順に整理します。
- HTMLの見出しタグ（h1〜h6）の書き方と、6段階それぞれの位置づけ
- h1は1つ、レベルは1段ずつという原則が必要になる理由
- 左線・下線・背景色といった見出しの装飾をCSSで作る手順
- 見出しの中にリンクやbrを入れてよい場面と、避けたほうがよい場面
- 見出しの階層が崩れたとき、目次や読み上げで実際に何が起きるのか
まずは書き方の確認から入ります。ここを押さえておくと、後半の装飾の話がつながりやすくなります。
Web担当者見出しはとりあえずh2とh3を使えばいいと聞きました。h1やh4以降は、いつ使うものなのでしょうか。
Writers-hub編集部
h1はページ全体の題名にあたるので、記事であれば記事タイトルが入ります。CMSを使っているなら、多くの場合はテンプレート側が自動で出力しているはずです。h4以降は階層の深い文書のために用意されたもので、記事本文で必要になる場面はほとんどありません。h4を使いたくなったときは、その上のh2やh3の切り方が粗くないかを先に疑うと、早く直せます。
HTMLの見出しタグとは
HTMLの見出しタグは、文書の見出しを表す要素です。h1からh6まで6段階あり、h1が最上位、h6が最下位という序列を持ちます。headingの頭文字を取ってhタグ、日本語では見出しタグと呼ばれています。
書き方は、開始タグと終了タグで見出しの文言を挟むだけ。
<h1>HTMLの見出しの書き方</h1>
<p>ここに導入の本文が入ります。</p>
<h2>h1からh6の使い分け</h2>
<p>ここに本文が入ります。</p>
<h3>h1はページに1つに絞る</h3>
<p>ここに本文が入ります。</p>6段階それぞれの位置づけを整理すると、次のようになります。
タグ | 位置づけ | 記事での使いどころ |
|---|---|---|
h1 | 最上位の見出し | ページ全体の主題。原則として1ページに1つ |
h2 | 大見出し | 記事を構成する章 |
h3 | 中見出し | h2の中をさらに分けた項目 |
h4 | 小見出し | h3を分ける必要が出た場合 |
h5・h6 | 最下層の見出し | 仕様書や技術文書など、階層が深い文書 |
ブラウザで開くと、h1が大きく、h6に向かって小さく表示されます。ただしこれは、ブラウザが初期状態で持っているスタイルがそう見せているだけ。見出しタグ自体は文字の大きさを一切指定していません。
では、見出しタグは何を宣言しているのか。「ここから次の同じレベルの見出しまでが一つのまとまり」という区切りです。この区切りを読み取っているのは、人間の読者だけではありません。検索エンジンはページの主題と構成を推測する材料に使い、スクリーンリーダーは見出しを一覧にしてページ内の移動に使い、CMSやプラグインの目次生成機能も見出しタグを拾って並べています。
裏を返せば、文字を大きくしたいという理由だけで見出しタグを選ぶと、そのページの構造を機械に対して誤って申告することになります。表示上は何も起きないため、公開した直後には気づけません。
※ 見出し要素の仕様上の定義と使用上の注意は、MDN Web Docsの見出し要素のページにまとまっています。
関連記事：【2025年最新版】初心者でもできるSEOのやり方完全ガイド | 上位表示するための具体的な方法を徹底解説
h1からh6の使い分け3原則
見出しでつまずくのは、たいてい書き方ではなく順序のほうです。実務で押さえるべき原則は、次の3つに絞れます。
h1はページに1つに絞る
h1は、そのページ全体が何のページなのかを示す見出しです。HTMLの仕様上、複数のh1を置くこと自体が禁止されているわけではありません。ただしMDNは、1つのページに複数のh1要素を使わないことを明確に推奨しています。理由は単純で、最上位が2つあるとページの主題が一つに決まらなくなるためです。
section要素を入れ子にすればh1を何度使っても階層が自動で決まる、という解説を見かけることがあります。この考え方のもとになった文書アウトラインの仕組みは、結局どのブラウザにも支援技術にも実装されませんでした。見出しのレベルは自分で正しく指定する前提で組むほうが安全でしょう。
レベルは1段ずつ下げる
h2の次にいきなりh4を置くように、レベルを飛ばす書き方は避けます。表示上は問題なく見えても、見出しだけを拾って構造を組み立てる機械の側では、h3が抜けた不完全な階層として扱われるためです。
戻るときは飛ばして構いません。h3の次にh2が来るのは、章が終わって次の章に移ったという自然な流れになります。h3を立ててよいかどうかは、次の条件で判断できます。
- そのh2の中身が、2つ以上の項目に分かれている
- 分けた項目それぞれに、本文が数段落ぶん存在する
- 分けた項目の名前が、目次に並んでも意味が読み取れる
1つにしかならないh2は、h3を作らず本文で書き切るほうが読みやすくなります。項目が1つしかない箇条書きを作らないのと同じ理屈です。
見た目の都合でレベルを選ばない
「h2の見た目が好みではないからh3にする」という判断は、構造をデザインの都合に合わせることになります。目次にはh3として並び、機械にはh2の下位項目として伝わり、本来の章の切れ目は消えます。
見た目を変えたいという要望が出たときは、タグの選択ではなくCSSで解決できないかを先に確認してください。ここが、次の章の入り口になります。
関連記事：302リダイレクトとは？301との使い分けと設定・エラー対処を解説
見出しの装飾を作るCSSの書き方
見出しのデザインは、HTMLに手を入れずCSSだけで作れます。装飾はすべてCSSに寄せ、HTMLにはレベルだけを残すという分け方を最初に決めておくと、後からデザインを差し替えるときの作業範囲がCSSファイル1枚に収まります。
進め方は4段階です。
本文側に書くのは、レベルと文言だけ。装飾用のdivやspanで囲む作業は、この段階では行いません。
「左線」「下線」「背景色つき」のように、見た目のパターンごとにクラス名を決めます。パターンは3つから5つもあれば、記事メディアの大半は足ります。
決めたクラス名に対して、線・余白・背景色を指定します。色や太さの値は変数にまとめておくと、後の一括変更が1行で終わります。
特定のページだけ配色を変えたい場合は、既存のクラスを書き換えるのではなく、クラスを1つ足して上書きします。既存記事への影響を切り離せます。
この順番を守っていれば、記事本文のHTMLは装飾の変更に巻き込まれません。実際のコードを、基本の形から見ていきます。
線だけで作る基本の形
もっとも使用頻度が高いのが、線を1本引くタイプです。左に縦線を置く形、文字数ぶんだけ下線を引く形、見出しの下に短い線を置く形の3つを挙げます。
/* 左に縦線を引く */
.c-heading--line {
padding-left: 0.7em;
border-left: 5px solid #1f6feb;
}
/* 文字数ぶんだけ下線を引く */
.c-heading--underline {
display: inline-block;
padding-bottom: 0.3em;
border-bottom: 3px solid #1f6feb;
}
/* 見出しの下に短い線を置く */
.c-heading--bar {
position: relative;
padding-bottom: 0.6em;
}
.c-heading--bar::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 64px;
height: 3px;
background-color: #1f6feb;
}HTML側は、クラスを付けるだけで終わります。
<h2 class="c-heading--line">見出しの文言</h2>下線を引くときに`display: inline-block`を指定しているのは、指定しないと見出しが親要素の幅いっぱいまで広がり、線も端まで伸びてしまうためです。文字の長さに合わせたい場合はこの1行が要ります。
背景色と連番を足す応用
背景色を敷く形と、連番を自動で振る形も、頻度の高い要望です。連番はCSSのカウンター機能で作れるため、本文に数字を書き込む必要はありません。
/* 背景色と左線を組み合わせる */
.c-heading--fill {
padding: 0.6em 0.8em;
background-color: #f0f4f9;
border-left: 5px solid #1f6feb;
}
/* 記事内のh2に連番を自動で振る */
.p-article {
counter-reset: heading;
}
.p-article h2::before {
counter-increment: heading;
content: counter(heading) ".";
margin-right: 0.4em;
color: #1f6feb;
}連番をCSSで振っておくと、記事の途中に章を1つ足したときも番号を付け直す必要がありません。手作業で「1.」「2.」と本文に書いていた場合、章を挿入するたびに以降の見出しをすべて書き換えることになります。
装飾に使う色や線の太さは、`--heading-color`のようなCSS変数にまとめておくと、サイト全体の配色変更が変数の値を変えるだけで終わります。見出しのパターンが増えるほど効いてくる部分です。
装飾を使い回すためのclass設計
クラス名の付け方でよくある失敗が、`.blue-line`のように見た目そのものを名前にしてしまうことです。後から線の色を緑に変えた瞬間、クラス名と実際の見た目が食い違います。
名前は、役割か種類で付けるほうが長持ちします。`.c-heading--primary`のように優先度で分ける、あるいは`.c-heading--section`のように使う場所で分ける。どちらでも構いませんが、サイト内で命名のルールを1つに統一しておくことが、後から担当を引き継ぐ人の作業時間を左右します。
関連記事：GA4の使い方｜画面の見方から最初に見る3つの数字まで解説
見出しの中に入れてよいタグ
見出しタグの中には、文字を構成する要素を入れられます。リンクのa、強調のstrongやem、範囲を区切るspan、改行のbr、小さく見せるsmall、画像のimgなどが該当します。一方でdivやp、リスト、別の見出しといった要素は入れられません。
実務で判断に迷いやすいのは、次の3つでしょう。
リンク：見出し全体をaで囲むこと自体は可能です。ただし見出しの文言がそのままリンクテキストになるため、一覧ページのカードなど、クリックさせる前提の場所に限るほうが無難でしょう。
改行のbr：表示調整として入れられます。ただし読み上げの際に意図しない区切りが生じることがあるため、改行が必要なほど長い見出しになっていないかを先に見直すほうが建設的です。
装飾用のspan：線や図形を出すために中身のないspanを置く手法がありますが、::beforeと::afterで同じ表現を作れます。空の要素は読み上げに何も渡らず、目次を自動生成する仕組みでは余計な文字が混ざる場合もあります。
副題を付けたい場合も注意が要ります。主題をh1、副題をh2にすると、副題が独立した章として扱われてしまう。HTMLの仕様では、hgroup要素の中に見出しとp要素を並べる方法が示されています。
読まれる見出し文の3つの条件
ここまではHTMLとCSSの話でした。ここからは、実際に読まれる記事にするための見出しの文言に移ります。構造として正しくても、文言が弱ければ目次で離脱します。
見出しだけを読んで内容が追える
h2とh3だけを抜き出して並べ、それだけを読んで記事の内容が追えるかを確認してください。見出しだけを続けて読んで意味が通れば、本文の構成も揃っています。読者は目次を見て読むかどうかを決めるため、この状態で意味が通らない構成は、本文の質にかかわらず読まれません。
体言止めばかりで内容が読み取れない、隣り合う見出しが同じことを言っている、順序が入れ替わっている。こうしたずれは、本文と一緒に読んでいるあいだは気づけないものです。
隣り合う見出しで答える疑問が違う
見出しは、その節が答える疑問の見出しです。「見出しの基本」「見出しの使い方」「見出しのポイント」と並んでいるとき、3つが答える疑問はほぼ同じ。読者から見れば、同じ話が3回続いているのと変わりません。
各見出しの横に、その節が答える疑問を1つずつ書き出してみると、重複はすぐに見つかります。疑問が書けない見出しは、書く内容が決まっていないという意味でもあるでしょう。
本文の結論と見出しがずれていない
執筆の途中で内容が変わり、見出しだけが最初のまま残っているケースは珍しくありません。「3つの方法」と書いてあるのに本文には2つしかない、といった食い違いは、公開前の確認で必ず拾いたい部分です。
見出しの設計は、書き手の感覚ではなく手順で揃えられる領域です。逆に言えば、手順が決まっていない状態で複数人が書くと、記事ごとに構成の質がばらつきます。
見出しの構成を毎回ゼロから考えて、確認と差し戻しに時間を取られていませんか
合同会社Writers-hubでは、読者の疑問を分解して見出しを確定させるところまでを制作工程に組み込み、構成の段階でレビューを通してから執筆に入っています。見出しが固まっていれば、本文の書き直しは大幅に減らせます。
見出しの崩れが引き起こす不具合
見出しの階層が崩れていても、ページの表示は崩れません。問題が表に出るのは、見出しを機械が読み取る場面です。実際に起きることを挙げます。
- 文字を大きくする目的でh3を使い、目次に本文中の強調が並んでしまう
- 見出しに見えるテキストをpタグで組み、目次にも構造にも反映されない
- レベルを飛ばした結果、スクリーンリーダーの見出し移動で節が抜け落ちる
- 中身が空の見出しタグが残り、機械の側に何も伝わらない
- CMSのテンプレートがすでにh1を出力しており、記事側と合わせて1ページに2つ並ぶ
とりわけ見落とされがちなのが、支援技術の利用者への影響です。スクリーンリーダーには見出しだけを一覧にして移動する機能があり、階層が崩れているページでは、目的の節にたどり着くまでの手数が増えます。Webアクセシビリティの国際的な基準であるWCAGでも、見出しとラベルは主題または目的を説明していることが求められています。
※ 引用元はWeb Content Accessibility Guidelines（WCAG）2.1の達成基準2.4.6「見出し及びラベル」（レベルAA）。
見出しレベルを論理的に使うことと、支援技術が見出しをページ内の移動に利用することは、MDN Web Docsの解説でも触れられています。
CMSを使っている場合は、エディタで選ぶ見出しレベルと実際に出力されるHTMLがずれていないかも確認しておきたいところ。公開ページをブラウザで開き、検証ツールでh1がいくつあるかを見るだけで判定できます。記事を量産する前に、テンプレート1つぶんだけ確認しておけば済む作業です。
見出しの中身を空にする、あるいは画像だけを入れて文字を持たせない状態は避けてください。構造だけが宣言されて内容が伝わりません。デザイン上どうしても画像を使う場合は、alt属性に見出しの文言を入れます。
こうした不具合は、一度公開してしまうと修正の対象が全記事に広がります。原則を書き手全員が共有できている状態を先に作っておくほうが、結果として手数は少なくなるはずです。
見出しのルールを社内で共有できる形にしておきたい方へ
見出しの原則は、覚える量としては多くありません。難しいのは、複数人が書く体制でそれを毎回守り続けることのほうです。弊社では、判断基準の言語化からレビュー体制の設計までを支援し、自社で書き切れる状態づくりをお手伝いしています。
HTMLの見出しについてよくある質問
見出しまわりで質問を受けることの多い項目を、まとめて整理します。
表示もSEOも壊れることはありません。ただしページの主題を示す見出しが存在しない状態になるため、機械の側はページ全体が何についてのページかを本文から推測することになります。CMSがテンプレート側でh1を出力しているかどうかを、まず確認してください。
構いません。見出しタグはレベルを表すもので、表示サイズとは独立しています。h3をh2より大きく見せることも技術的には可能です。ただし読者が階層を見た目で判断できなくなるため、上位ほど大きいという関係は保つほうが親切でしょう。
見出しとして扱いたいなら、見出しタグを使ってください。見た目が見出しでもタグが違えば、目次にも読み上げの一覧にも載りません。どうしても構造上の見出しにしたくない場合は、role属性とaria-levelで見出しとして扱う方法もあります。
入れられる見出しにだけ入れれば十分です。すべての見出しに同じ語を入れると、見出しごとの違いが消えて目次が機能しなくなります。優先すべきは、その節が何に答えるのかが読み取れることのほう。
色や形そのものを名前にせず、役割か使う場所で付けます。線の色を後から変えたときに、クラス名と見た目が食い違わないためです。サイト内で命名ルールを1つに統一しておくことのほうが、名前の良し悪しより効きます。
まとめ｜見出しは大きさでなく区切りで決める
HTMLの見出しは、文字を大きくするための仕組みではありません。見出しは大きさではなく、区切りで選ぶ。この一点を守るだけで、目次も読み上げも検索エンジンへの伝わり方も同時に整います。
実際に手を動かす順番としては、h1をページに1つに絞る、レベルを飛ばさない、線や色はすべてCSSに書く、の3つから始めれば十分でしょう。装飾のパターンにクラス名を付けて分離しておけば、後からデザインを変えても本文のHTMLには触らずに済みます。
そのうえで残るのが、見出しの文言をどう決めるかという問題です。構造の正しさは手順で担保できても、目次を見た読者に読み進めてもらえるかどうかは、文言の設計にかかっています。
私たち合同会社Writers-hubは、検索から流入する記事の企画から執筆、入稿までを手がけてきました。見出しの階層と文言を構成の段階で固め、複数人が書いても構成の質が落ちない形を整えるところまでを含めて支援しています。
自社の記事の見出し設計を、一度外から見てもらいたいとお考えなら
既存記事の見出しを並べて、構造の崩れと文言の重複がどこにあるかを確認するところからでも構いません。今の記事をどう直すか、これから何本作るかも含めて、状況をうかがったうえでお話しします。
