HTMLのh3タグは、「見出しタグ」の一種で、ページ内の情報を階層的に整理するために使われる要素です。見出しタグとは、文章の中で重要なタイトルや小見出しを示すためのタグのことで、h1〜h6まで6段階に分かれています。その中でh3タグは、3番目のレベルの見出しとして位置づけられます。たとえば、本の構成にたとえると、h1が「本のタイトル」、h2が「章タイトル」、h3が「節のタイトル」といったイメージで捉えると理解しやすくなります。
HTMLにおけるh3タグの基本的な役割と意味
HTMLでは、見出しタグは単に文字を大きくするためだけのものではなく、「文書の構造」をブラウザや検索エンジン、支援技術（スクリーンリーダーなど）に伝える役割を持っています。文書の構造とは、文章がどのような章や節に分かれていて、どの部分がどの内容のまとまりなのかを示す情報のことです。h3タグは、この構造の中で「h2で示された大きなテーマの中の、さらに細かいトピック」を表すために利用されます。
たとえば、次のような構成を考えてみます。
- h1：Webデザイン入門
- h2：HTMLの基本
- h3：見出しタグの役割
- h3：段落タグと改行タグ
この例では、「Webデザイン入門」がページ全体のテーマ（h1）で、「HTMLの基本」がその中の大きな章（h2）になります。そして「見出しタグの役割」や「段落タグと改行タグ」といったh3タグは、「HTMLの基本」という章の中に含まれる小さなトピックとして扱われます。このようにh3タグは、コンテンツを「まとまりごと」にわかりやすく整理するための重要な要素です。
また、h3タグは見た目のスタイルを持っていますが、そのデザインはブラウザが用意している初期設定に過ぎません。太字で少し大きめに表示されることが多いですが、本来の役割は「このテキストは文書構造上、3番目のレベルの見出しである」と伝えることです。デザインを自由に変える場合はCSSというスタイル指定の仕組みを使いますが、それでもタグの意味自体は変わりません。初心者の方は、まず「見た目」ではなく「意味」を意識してh3タグを使うことが大切です。
検索エンジンにとっても、h3タグはページ内容を理解するための手がかりになります。検索エンジンはページ内の見出しを読み取り、「このページはどのようなテーマで、どんな内容の項目があるのか」を解析します。h3タグを適切に使うことで、ページ内のトピックが整理され、検索エンジンにとっても理解しやすい構造になります。これは、検索結果で内容が正しく評価される助けにもなります。
さらに、アクセシビリティという観点でもh3タグは重要です。アクセシビリティとは、障害の有無にかかわらず、できるだけ多くの人がコンテンツを利用しやすい状態を目指す考え方です。スクリーンリーダーという読み上げソフトを使っているユーザーは、見出しタグを頼りにページ内を移動することがあります。そのとき、h1からh3までが正しい順番で使われていると、ユーザーは「大きな話題」と「その中の小さな話題」の関係をつかみやすくなります。
h3タグは、「h2の下位レベルの見出し」として使うことが基本です。つまり、h2がないのにいきなりh3を使うのではなく、h1 → h2 → h3という順序を意識して配置していきます。この順番を守ることで、機械にも人にも読みやすい構造が形成されます。視覚的にはそれほど違いが分からなくても、見出しレベルを飛ばしてしまうと、支援技術や検索エンジンにとっては構造が分かりにくくなります。
HTMLを書くときは、まずページ全体の「大きなテーマ（h1）」を決め、その中の「大きな項目（h2）」を整理し、さらにその項目を分解した「小さな項目（h3）」を配置する、という流れで設計していきます。h3タグは、この三段階目のレベルで使われる見出しとして、ページ構造を細かく整理する役割を担っています。単に「小さい見出し」というイメージだけではなく、「情報のまとまりを示すラベル」としての意味を意識すると、より適切な使い方ができるようになります。
h3タグを使用するメリットと構造設計のポイント
h3タグを正しく使用する最大のメリットは、ページ全体の情報構造をわかりやすく整理できることです。情報構造とは、ページ内の内容を「どの話題が上位で、どの話題がその中の詳細なのか」という階層関係で整理したものを指します。人間にとっても、コンピューターにとっても、この階層が明確であるほど内容を理解しやすくなります。h3タグは、h2で示した大きなトピックをさらに細かく分けるための見出しとして働き、読み手が知りたい情報に素早くたどり着けるようにします。
読みやすさと理解しやすさの向上
長い文章が続くページでは、テキストがただ縦に並んでいるだけだと、読者はどこから読めばよいか迷いやすくなります。h3タグで小見出しを設定することで、読者はページをざっとスクロールしただけでも内容の全体像をつかみやすくなります。たとえば、「HTMLの基本」というh2見出しの中に、「タグとは何か」「属性とは何か」「コメントの書き方」といったh3見出しがあれば、自分が知りたい項目をすぐに見つけることができます。このように、h3タグは「ナビゲーションの目印」としての役割も持っています。
また、小見出しごとに内容をまとめることで、1つの段落に情報を詰め込みすぎず、頭の中で整理しながら読み進めやすくなります。特に初心者向けの記事や解説ページでは、1つのセクションで1つのテーマだけを扱い、そのテーマに対応する見出しをh3タグで示すと理解度が高まりやすくなります。
メンテナンス性と再利用性の向上
Webサイトは一度作ったら終わりではなく、後から内容を追加したり修正したりすることがよくあります。そのとき、h3タグでページの構造が整理されていると、必要な部分を探しやすくなります。たとえば、「このページの中で“h3タグのメリット”について説明している箇所を直したい」というときに、h3見出しがあればソースコードの中から該当部分をすぐに見つけることができます。
また、同じ構造を別のページでも使いたい場合、h2とh3で作られたセクションをそのままコピーして流用できるので、テンプレートのように扱いやすくなります。こうした再利用性の高さは、複数ページを持つWebサイトや学習用教材を作成するときに特に役立ちます。
検索エンジンと構造化された情報
検索エンジンは、ページのテキストだけでなく、見出しタグも参考にしながら内容を理解しようとします。h3タグでトピックを細かく分けておくと、「このページにはこういう小さなテーマも含まれている」という情報が検索エンジンにも伝わりやすくなります。これにより、特定のキーワードに関連する部分が検索結果で適切に評価される可能性が高まります。
ここで注意したいのは、「キーワードを詰め込むためだけにh3タグを大量に増やす」ことは避けるべきという点です。見出しはあくまで内容の構造を示すものであり、「そのセクションの内容を要約した短いタイトル」であることが重要です。検索のためではなく、まずユーザーのために読みやすい構造を目指すことが、結果的に検索エンジンにも良い影響を与えます。
構造設計のポイント：階層を意識した使い方
h3タグを使うときの構造設計のポイントとして、「階層を飛ばさない」というルールがあります。一般的には、h1の後にh2、h2の中でh3を使う、という順番で構造を作ります。たとえば、h2を使わずにいきなりh3を使うと、構造上の親となる見出しがなく、文書全体の階層があいまいになってしまいます。支援技術や検索エンジンがページのアウトライン（見出しの一覧）を作るときにも、論理的なまとまりを認識しづらくなります。
構造設計を行う際には、まず紙にページのアウトラインを書き出してみる方法が有効です。たとえば次のように、「大きなテーマ（h2）」と「その下位のトピック（h3）」を箇条書きにして整理します。
- h2：HTMLの基本
- h3：タグの概念
- h3：属性の基本
- h3：コメントの書き方
- h2：CSSの基本
- h3：セレクタとは
- h3：プロパティと値
このようなアウトラインを作ってからHTMLに落とし込むことで、自然とh3タグが適切な位置に配置され、文書の構造が一貫したものになります。
デザインと構造を分けて考える
h3タグのメリットを最大限に活かすためには、「デザイン」と「構造」を分けて考えることが大切です。構造とは、h1〜h6タグを使って文章の階層関係を表現することです。一方、デザインとは、CSSを使って文字の大きさや色、余白などを調整し、見た目を整えることです。見た目を変えたいからといって、構造的には見出しでない箇所にh3タグを使うと、ページ全体の論理的な意味が崩れてしまいます。
たとえば、「ただ文字を大きくしたいからh3を使う」というのはよくある誤った使い方です。この場合、本当に見出しとしての意味があるのであればh3タグを使って問題ありませんが、単なる強調であれば<strong>タグやCSSのスタイルのほうが適切です。構造設計の観点からは、「そのテキストが文書の中でどの位置づけなのか」を基準にして、h3タグを使うかどうかを判断することが重要になります。
h3タグの正しい書き方と基本構文
h3タグの書き方はとてもシンプルですが、初心者の方ほど「どこに書けばよいのか」「他のタグとの関係はどうなるのか」で迷いやすい部分でもあります。ここでは、h3タグの基本構文と、実際にHTMLファイルの中でどのように記述するのかを丁寧に整理していきます。
まず、h3タグの基本構文は次のようになります。
<h3>ここに見出しのテキストを入れます</h3>このように、開始タグ <h3> と終了タグ </h3> の間に見出しとして表示したいテキストを書きます。開始タグと終了タグで1つの要素（ここではh3要素）が完成する、という考え方を押さえておくと、他のタグを学ぶときにも理解しやすくなります。要素とは、開始タグ・終了タグ・その中身（コンテンツ）をまとめた1つのまとまりのことです。
次に、HTML文書全体の中での配置を確認してみます。h3タグは通常、ページのタイトルであるh1タグや、セクションの大きな見出しであるh2タグの下の階層に置かれます。シンプルな例を示すと、次のようなコードになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>見出しタグの例</title>
</head>
<body>
<h1>見出しタグの基本</h1>
<h2>HTMLの見出しレベル</h2>
<h3>h3タグの基本構文</h3>
<p>ここにh3タグに対応する本文を書きます。</p>
</body>
</html>この例では、h1がページ全体のタイトル、h2が大きな章タイトル、h3がその章の中の小さな見出しという位置づけになっています。h3タグの直後に続く <p> タグは段落を表すタグで、そのh3で示したトピックの内容を書いていきます。このように、「見出し（h3）→本文（p）」というセットで使うことを意識すると、構造が自然に整っていきます。
h3タグには、他の多くのHTMLタグと同じように「属性」を指定することもできます。属性とは、その要素に対して追加情報を付ける仕組みのことで、例えば id や class が代表的です。idは要素に一意の名前を付けるための属性で、classは複数の要素をグループ化するための属性です。h3タグと組み合わせると、次のような書き方になります。
<h3 id="section-basic" class="heading-level3">h3タグの基本構文</h3>ここでは、id="section-basic" という属性で、このh3要素に「section-basic」という名前を付けています。また、class="heading-level3" で「heading-level3」というクラス名を付けています。idやclassは、後からCSSを使ってデザインを指定したり、JavaScriptで特定の要素を操作したりするときの目印として使われます。
構文上のポイントとして気をつけたいのは、h3タグの中には、基本的に「見出しとして意味を持つテキスト」を置くということです。改行のためだけに<br>タグを多用したり、レイアウト目的で<div>などを過剰に入れたりするのは避けたほうがよい書き方です。ただし、見出しの中で一部の文字だけを強調したい場合には、<strong> や <span> といったインライン要素を使うことがあります。インライン要素とは、段落の中の一部分に対して意味やスタイルを付けるための要素のことです。例えば次のように書けます。
<h3><strong>重要なポイント:</strong> h3タグの基本構文</h3>この例では、「重要なポイント:」の部分だけを太字で強調しています。h3全体が見出しであることに変わりはなく、その中で一部だけ強調しているイメージです。
また、h3タグの中に別のブロック要素（段落やリストなど）を入れることはできません。ブロック要素とは、段落や見出し、リストのように「行全体を占める」要素のことで、<p>・<ul>・<div>などが該当します。たとえば、次のような書き方は正しくありません。
<!-- この書き方は誤りの例です -->
<h3>
見出しのテキスト
<p>この段落はh3の中に書かないようにします。</p>
</h3>この場合は、h3タグの外に段落を出して書き直す必要があります。正しい例は次のようになります。
<h3>見出しのテキスト</h3>
<p>この段落はh3の後に続けて書きます。</p>ソースコードを書くときには、インデント（字下げ）を揃えることも重要です。インデントとは、ネスト（入れ子）構造を見やすくするために行の先頭にスペースやタブを入れることです。h3タグ自体は入れ子にすることはありませんが、h3を含むセクション全体を <section> や <article> といったタグで囲む場合、インデントを揃えることで構造が視覚的にも把握しやすくなります。
<section>
<h2>HTMLの基本</h2>
<h3>h3タグの正しい書き方</h3>
<p>h3タグはこのように使います。</p>
</section>このような書き方を習慣にすることで、コードレビューや共同開発の際にも読みやすいHTMLを書くことができます。
h3タグでページを整理する際の実践的な使い方
h3タグを実際のページ制作でどのように使うかを考えるときは、「どの単位で内容を分けるか」を意識することが大切です。ページ全体を大きなまとまりに分けるのがh2、そのまとまりの中をさらに細かく区切るのがh3というイメージを持つと、どこでh3タグを使えばよいか判断しやすくなります。ここでは、具体的なページの種類を例にしながら、h3タグを使って整理する方法を確認していきます。
学習記事や解説記事でのh3タグの使い方
学習記事や技術解説のように情報量が多いページでは、h3タグは「トピックの小分け」にとても役立ちます。例えば、「HTMLの基本」というテーマの記事を作る場合、まずh2で大きな章を決めます。
- h2：HTMLの基本
- h2：代表的なHTMLタグ
- h2：実際のページを作ってみよう
このように大きな章を決めたあと、それぞれのh2の中身をh3で細かく分割します。
- h2：HTMLの基本
- h3：HTML文書の構造
- h3：タグと要素の違い
- h3：属性の役割
- h2：代表的なHTMLタグ
- h3：見出しタグ（h1〜h6）
- h3：段落タグ（p）
- h3：リンクタグ（a）
このように分割することで、読者は自分の知りたいトピックを目次やスクロールで簡単に見つけることができます。また、執筆する側も「1つのh3見出しごとに1つのテーマだけを書く」という意識を持ちやすくなり、説明が脱線しにくくなります。
ブログ記事でのh3タグの使い方
ブログ記事では、h2で大きな流れを作り、その中で具体例や手順をh3で分ける使い方がよく行われます。例えば、「HTML学習でつまずきやすいポイント3選」という記事を考えます。
- h2：つまずきポイント1：タグの閉じ忘れ
- h3：よくあるミスのパターン
- h3：エラーの見つけ方
- h3：効率的なチェック方法
- h2：つまずきポイント2：見出しレベルの混乱
- h3：h1〜h3の基本的な役割
- h3：アウトラインを意識した設計例
このように構成すると、読者はまずh2で大きなテーマを把握し、必要に応じてh3レベルの詳細を読むことができます。特にスマートフォンで閲覧する読者にとっては、スクロールしながら見出しだけを追って内容を判断することが多いため、h3による整理は読みやすさに直結します。
手順説明ページでのh3タグの使い方
手順や操作方法を説明するページでは、「ステップ」をh3としてまとめる方法が便利です。例えば、「h3タグを使った見出しの追加手順」というテーマなら、次のように構造を考えられます。
- h2：事前準備
- h3：HTMLファイルを用意する
- h3：エディタを準備する
- h2：h3タグを追加する手順
- h3：見出しを追加する位置を決める
- h3：h3タグで見出しを書き込む
- h3：ブラウザで表示を確認する
このように、読者の作業の流れに合わせてh3を「ステップ見出し」として使うと、今どの段階の作業をしているかを視覚的に把握しやすくなります。各h3の直後に、そのステップに対応する説明文やコード例を置くことで、手順ごとのまとまりがはっきりした構成になります。
FAQ（よくある質問）ページでのh3タグの使い方
FAQページでは、質問1つひとつをh3タグで表現する方法がよく用いられます。例えば、h2でカテゴリを分け、その中で個別の質問をh3にします。
- h2：HTMLに関する質問
- h3：h3タグはどのようなときに使いますか？
- h3：見出しタグをデザインだけの目的で使ってもよいですか？
- h2：CSSに関する質問
- h3：h3タグの文字サイズを変更するにはどうすればよいですか？
この構成では、ユーザーはカテゴリ（h2）を見て大まかな範囲を絞り込み、その中からh3見出しで自分の疑問に該当するものを探します。質問のテキストをそのままh3にしておくと、検索もしやすく、一覧性も高まります。
フォームやお問い合わせページでのh3タグの使い方
お問い合わせフォームや登録フォームのページでは、入力項目のグループごとにh3タグを使って区切る方法があります。例えば、次のような分け方が考えられます。
- h2：お問い合わせフォーム
- h3：お客様情報
- h3：お問い合わせ内容
- h3：返信方法の選択
「お客様情報」の下に名前・メールアドレスなどの入力欄をまとめ、「お問い合わせ内容」の下に質問や詳細説明のテキストエリアを置く、といった構成です。このようにグループごとにh3を使うと、ユーザーはフォーム全体の構造を把握しやすくなり、どこまで入力したかも一目で分かります。
目次との連携を意識した使い方
ページの先頭に目次を設ける場合、h2・h3の見出しテキストをそのまま目次の項目として利用することができます。目次のリンク先として、h3タグにid属性を付けておく方法がよく使われます。
<h3 id="usage-step">h3タグを使った手順の整理</h3>このようにidを付けておくと、目次から #usage-step というリンクを設定し、クリック時にそのh3見出しの位置までジャンプさせることができます。長文の記事やマニュアルでは、h3に対して適切なidを付与しておくことで、ユーザーが目的の箇所に素早く移動できるようになります。
h3タグとCSSを組み合わせたデザイン手法
h3タグは文書構造を表す役割を持っていますが、同時にCSSと組み合わせることで、見た目を整えて読みやすいデザインにすることができます。ここでは、初心者の方でも取り入れやすい基本的なデザイン手法から、少し応用的な装飾例までを順に解説します。CSS（スタイルシート）とは、HTMLで作成した文書に対して、文字の色・大きさ・余白・枠線などの見た目を指定するための仕組みのことです。h3タグの意味はあくまで「3番目のレベルの見出し」ですが、その見出しがページの中で視覚的にもわかりやすくなるようにCSSで装飾していきます。
基本的なスタイル調整：文字サイズ・色・余白
まずは、最も基本的なスタイル指定から見ていきます。h3タグ全体に対してCSSを指定する例は次のようになります。
h3 {
font-size: 1.2rem;
color: #333;
margin-top: 1.5em;
margin-bottom: 0.5em;
}ここで使用しているプロパティを簡単に説明します。
font-size：文字サイズを指定します。1.2remは、基準の文字サイズの1.2倍という意味です。color：文字の色を指定します。#333は少し薄めの黒で、真っ黒よりも目に優しい色合いになります。margin-top・margin-bottom：要素の外側の余白を指定します。見出しの上と下に適度な余白を入れることで、段落との区切りが視覚的にわかりやすくなります。
このようなスタイルを設定することで、h3見出しが本文と自然に区別され、ページ全体のリズムが整いやすくなります。
クラスを使って種類ごとにデザインを変える
ページ内に複数種類のh3見出しがある場合、「通常の小見出し」と「注意を促す小見出し」など、役割に応じて見た目を変えたいことがあります。そのときに便利なのが class 属性です。classは、要素にグループ名のようなものを付けて、CSSからそのグループごとにスタイルを指定できる仕組みです。
HTML側では次のように書きます。
<h3 class="section-title">基本的な使い方</h3>
<h3 class="warning-title">注意しておきたいポイント</h3>CSSでは、クラス名の前にドット（.）を付けて指定します。
h3.section-title {
border-left: 4px solid #333;
padding-left: 0.5em;
}
h3.warning-title {
color: #b00020;
background-color: #ffecec;
padding: 0.5em;
}このようにすることで、同じh3タグでも役割によって見た目を変えられます。左に線を付ける、背景色を変えるといったシンプルな装飾だけでも、ページ内で視線を誘導しやすくなり、内容の重要度や種類が直感的に伝わるようになります。
枠線や背景を使った見出しボックス風デザイン
見出しを小さなボックスのように見せるデザインもよく使われます。次の例では、枠線・背景色・角の丸みを組み合わせています。
h3.box-title {
border: 1px solid #ddd;
background-color: #f9f9f9;
padding: 0.75em 1em;
border-radius: 4px;
}ここでのポイントは、padding と border-radius です。
padding：要素の内側の余白で、文字と枠線の間にスペースを作ります。border-radius：角を丸くするプロパティです。数値を大きくすると丸みが強くなります。
このようなスタイルを使うと、h3見出しがセクションの「タイトルカード」のように見え、ページ内のまとまりが視覚的に理解しやすくなります。
アイコンや擬似要素を使った装飾
少し応用的な方法として、擬似要素を使った装飾があります。擬似要素とは、実際のHTMLには書かれていない「疑似的な要素」をCSSで追加する仕組みです。::before や ::after が代表的な擬似要素です。
例えば、h3見出しの先頭に小さなマークを付けたい場合、次のようなCSSを書きます。
h3.decorated-title {
position: relative;
padding-left: 1.2em;
}
h3.decorated-title::before {
content: "■";
position: absolute;
left: 0;
top: 0.1em;
font-size: 0.8em;
}ここでは、content プロパティで表示する文字を指定しています。position プロパティで擬似要素の位置を細かく調整し、見出しの左側に小さな四角形マークを表示しています。擬似要素を使うことで、HTMLのマークアップを増やさずに装飾を追加できるため、構造はそのままにデザインだけを工夫したいときに便利です。
レスポンシブデザインを意識した文字サイズ調整
スマートフォンやタブレットなど、画面サイズが異なる環境で閲覧されることを考える場合、h3タグの文字サイズも可変にしたいことがあります。レスポンシブデザインとは、画面サイズに応じてレイアウトや文字サイズを柔軟に変える設計のことです。CSSのメディアクエリを使うと、画面幅に応じてh3のスタイルを変えることができます。
h3 {
font-size: 1.1rem;
}
/* 画面幅が768px以上のとき */
@media (min-width: 768px) {
h3 {
font-size: 1.3rem;
}
}この例では、スマートフォンなどの小さい画面では少し控えめな文字サイズにし、タブレットやPCなど画面の広い環境では少し大きめの文字サイズに変更しています。これにより、どのデバイスでも読みやすい見出しを維持しやすくなります。
行間や文字間隔の調整
見出しが長くなって2行以上に折り返される場合、line-height や letter-spacing を使って行間や文字間隔を調整すると読みやすさが向上します。
h3 {
line-height: 1.4;
letter-spacing: 0.05em;
}line-height：行と行の間の高さを指定します。1.4〜1.6程度に設定すると、詰まりすぎず読みやすいことが多いです。letter-spacing：文字同士の間隔を指定します。少しだけ広げることで、日本語の見出しがすっきりとした印象になります。
このような微調整は見た目の変化が小さいように感じられるかもしれませんが、長文が多いページほど効果が出やすく、全体の印象を落ち着いたものにしてくれます。
h3タグを使う際に避けたいよくある誤り
h3タグは文書構造を整えるうえでとても便利な要素ですが、使い方を間違えると、かえってページが分かりにくくなったり、検索エンジンや支援技術に誤った情報を伝えてしまったりします。ここでは、初学者から中級者までがつまずきやすい「よくある誤り」と、その理由や改善方法を丁寧に整理していきます。ひとつひとつ意識して避けることで、読みやすく保守しやすいHTMLを書く力が身につきます。
見た目の大きさだけを目的にh3タグを使ってしまう
もっともよく見られる誤りのひとつが、「文字を大きくしたいから」「太字にしたいから」という理由だけでh3タグを使ってしまうケースです。本来、h3タグは「文書の中で3番目のレベルの見出し」を示すものであり、単なる装飾用のタグではありません。見出しとしての意味がない部分にh3を使うと、文書構造が不自然になり、検索エンジンやスクリーンリーダーがページの内容を正しく理解できなくなります。
文字のサイズや太さを変えたいだけであれば、CSSで font-size や font-weight を指定する、あるいは意味的に強調したい場合は <strong> や <em> といったタグを使うほうが適切です。どのタグを使うか迷ったときは、「これは見出しとして機能しているか？」という視点で考えると判断しやすくなります。
見出しレベルを飛ばして使ってしまう
もうひとつよくある誤りは、「h2がないのにh3だけ使っている」「h1の次にいきなりh3を配置している」といった、見出しレベルを飛ばしてしまう書き方です。見出しレベルは、h1からh6に向かって階層的な意味を持っています。h3はh2の下位レベルの見出しとして使うことが基本です。
たとえば、次のような構造は避けた方がよい例です。
<h1>HTML入門</h1>
<h3>見出しタグについて</h3>この場合、h1の直下にあるべきなのはh2レベルの見出しです。正しくは次のような構造になります。
<h1>HTML入門</h1>
<h2>見出しタグについて</h2>
<h3>h3タグの役割</h3>見出しレベルを飛ばしてしまうと、支援技術がページのアウトライン（見出しの一覧）を作成するときに、「このh3はどの見出しの下位に属するのか」が分かりにくくなってしまいます。結果として、ユーザーがページ内を効率よく移動しづらくなる原因になります。
h3タグの中にブロック要素を入れてしまう
h3タグの中に、<p> や <div>、<ul> といったブロック要素を入れてしまう誤りもよく見かけます。ブロック要素とは、段落・リスト・セクションなど、「行全体を占める要素」のことです。h3の中には基本的にテキストとインライン要素（<span>・<strong> など）だけを入れるようにし、段落やリストはh3の外側に配置する必要があります。
避けたい例は次のようなコードです。
<!-- 誤った例 -->
<h3>
見出しテキスト
<p>この段落はh3の中に書かれてしまっています。</p>
</h3>正しい書き方は次の通りです。
<h3>見出しテキスト</h3>
<p>この段落はh3の後に続けて書きます。</p>構文エラーを防ぐだけでなく、見出しと本文の役割を明確に分けるという意味でも重要なポイントです。
ページ内でh3の使い方が一貫していない
1つのページの中で、「ある場所では小見出しとして使っているのに、別の場所では強調テキストのように使っている」といった、一貫性のない使い方も避けたいパターンです。見出しレベルは文書全体を通して一貫していることが望ましく、読者も支援技術も、「h3ならこの程度の重要度だろう」と予測しながら読み進めます。
例えば、前半ではh2の下位の小見出しとしてh3を使っているのに、後半ではまったく別の意味合い（例えば注意書きの強調など）で使ってしまうと、アウトライン構造が崩れ、読み手が混乱しやすくなります。ページを作るときは、「このページにおけるh3の役割は何か」を最初に決めておき、そのルールに沿って使い続けることが大切です。
短すぎる・あいまいすぎる見出しテキスト
h3タグの中に書くテキストが、あまりにも短すぎたり、意味があいまいだったりするのもよくある問題です。たとえば、次のような見出しは内容が想像しづらくなります。
- h3：ポイント
- h3：注意
- h3：まとめ
見出しは、そのセクションで何について書いているかを簡潔に示す「ラベル」の役割を持っています。読者は見出しだけをざっと眺めて、読みたい箇所を判断しようとします。そのため、「何のポイントなのか」「何に対する注意なのか」を見出しテキストの中でできるだけ具体的に示すことが望ましいです。
例えば、次のように書き換えることで、h3の意味がぐっと明確になります。
- h3：h3タグを装飾目的だけで使う場合の注意点
- h3：h3と段落タグの正しい組み合わせ方
このように、見出しの時点で内容がイメージできるようにすることが、読みやすいページ作りにつながります。
不要にh3を細かく区切りすぎる
細かく整理しようとするあまり、1〜2行程度の内容ごとにh3を付けてしまうケースもあります。見出しの数が増えすぎると、逆にページ全体の流れが分かりにくくなり、読者が「どこが重要なのか」を判断しづらくなります。
h3タグを付ける目安としては、「その下に続く本文に、ある程度のまとまりがあるかどうか」を基準にするとよいです。数行で終わる短い説明であれば、段落内で強調するだけで十分なことも多く、必ずしもh3を使う必要はありません。見出しは「内容のグループ」を示すものなので、1つのh3の下には、それなりのボリュームの内容があることが望ましいと考えるとバランスが取りやすくなります。
h3にスタイルを直接書き込みすぎる
最後によく見られるのが、h3タグに style 属性を使って直接スタイルを大量に書き込んでしまうパターンです。例えば次のようなコードです。
<h3 style="font-size: 20px; color: red; margin-top: 30px; margin-bottom: 10px;">
見出しテキスト
</h3>学習の初期段階では便利に感じられますが、ページが大きくなると、デザインを変更するときに全部のh3を書き換える必要が出てきてしまいます。メンテナンス性を考えると、スタイルはできるだけCSSファイルや <style> 内にまとめ、h3要素にはclassやidだけを付ける書き方が望ましいです。
h3タグを活用したアクセシビリティ向上の考え方
h3タグは、見た目を整えるためのものではなく、文書構造を示す「意味のある見出し」としての役割を持っています。この「意味」が、アクセシビリティの観点からとても重要になります。アクセシビリティとは、障害の有無や使用環境にかかわらず、できるだけ多くの人がコンテンツを利用しやすい状態を目指す考え方です。特に、スクリーンリーダー（画面の内容を音声で読み上げるソフトウェア）を利用するユーザーにとって、見出しタグの使い方はページの使いやすさに直結します。
スクリーンリーダー利用者は、ページを最初から最後までただ読み上げるのではなく、「見出しだけを順番に読み上げる」という機能を使って、ページの全体像を確認することが多いです。これは、視覚的にざっとスクロールして見出しを眺める行為に近いイメージです。そのときに、h1〜h3が論理的な順序で使われていると、「このページは大きくどんな章があって、その中でどんな細かいトピックがあるのか」が頭の中で整理しやすくなります。h3タグは、h2の中に含まれる小さなトピックを示す見出しとして、ページ内の情報の位置づけを分かりやすく伝える役割を果たします。
アクセシビリティの観点から特に重要なのは、「見出しレベルを飛ばさない」というルールを守ることです。h2の下にh3、その下にさらに細かいトピックが必要であればh4というように、段階的な構造を保つことが大切です。例えば、h2がないのにいきなりh3から始まっていると、スクリーンリーダーは「このh3はどの見出しの下位なのか」を判断しづらくなります。視覚的には問題がないように見えても、支援技術から見ると構造が欠けている状態になってしまいます。
また、h3のテキスト内容もアクセシビリティに影響します。見出しのテキストは、そのセクションに何が書かれているかを簡潔に説明する必要があります。たとえば、「詳細」や「ポイント」だけでは具体的な内容が伝わりませんが、「h3タグを正しく使うためのポイント」といった具体的な書き方にすることで、ユーザーは見出しを聞いただけで自分に必要な情報かどうか判断しやすくなります。スクリーンリーダーで見出しだけを順に読み上げたときに、それぞれが意味のあるラベルとして機能するかどうかを意識することが重要です。
h3タグは、キーボード操作中心のユーザーにとっても役に立ちます。キーボードで見出し単位の移動ができる環境では、h1〜h3の構造がきちんと整っていると、必要な場所へすばやくジャンプできます。特に長文の解説記事やマニュアルでは、h2だけでなくh3も適切に配置されていることで、ユーザーは「大きな章」から「より具体的な項目」へと段階的に移動しやすくなります。
さらに、h3タグと周辺の要素の関係もアクセシビリティに関わります。h3の直後には、通常その見出しに対応する本文（段落やリストなど）が続きます。この対応関係が明確だと、読み上げを聞いているユーザーは、「今聞いている文章がどの見出しに属しているのか」を理解しやすくなります。逆に、h3の後に関連性の薄い内容が挟まったり、見出しと本文の組み合わせがばらばらだったりすると、話題の切り替わりがわかりづらくなります。
もうひとつ意識したいのは、「視覚的な強調」と「論理的な見出し」を混同しないことです。単に目立たせたいテキストにh3タグを使ってしまうと、その部分が見出しとして読み上げられてしまいます。論理的な見出しではない場所が見出し扱いになると、スクリーンリーダー利用者はページの構造を誤解してしまう可能性があります。強調したいだけのテキストには、CSSでスタイルを付けたり、意味的な強調には <strong> を用いたりするほうが適切です。
また、h3タグには必要に応じてid属性を付与することで、ページ内リンクの目的地としても活用できます。ページ先頭の目次から各h3見出しへジャンプできるようにすると、キーボード操作やスクリーンリーダーを使っているユーザーにとって、目的の情報に到達するまでのステップが少なくなります。id名は、そのセクションの内容がわかる単語を短く英語で付けることが多いですが、日本語ページであっても問題ありません。
視覚デザインについても、アクセシビリティを意識したh3の装飾が必要です。文字色と背景色のコントラスト（明暗の差）が小さすぎると、目の弱いユーザーや小さな画面で閲覧しているユーザーにとって読みにくくなります。淡い色同士の組み合わせではなく、十分なコントラストがある配色を選ぶことが重要です。また、見出しの文字サイズを本文より少し大きくし、上下に適度な余白を設けることで、視覚的にもセクションの区切りが分かりやすくなります。
さらに、認知面での負担を減らすためにも、h3見出しの配置と内容を一貫させることが大切です。同じレベルの情報には同じレベルの見出しを付け、表現もできる限り統一します。例えば、「〜の基本」「〜の応用」「〜の注意点」といったパターンで並べると、ユーザーは「今は基本を読んでいる」「次は応用の説明だ」と予測しながら読み進められます。このように、h3タグは単にレベル3の見出しというだけでなく、ユーザーが内容を整理して理解するための手がかりとして働きます。
まとめ
本記事では、HTMLにおけるh3タグの役割や構文、実践的な使い方、デザインと組み合わせる方法、使用時に避けるべき注意点、そしてアクセシビリティの観点から見た正しい活用方法について丁寧に解説しました。h3タグは単なる「小見出し」ではなく、文書の構造を明確にするための重要な要素であり、読み手にも支援技術にも情報のまとまりを正しく伝える役割を持っています。特に初心者の方にとっては、見出しタグが「見た目の変化」ではなく「文章に意味を与えるための要素」であるという点を理解することが、正しいHTMLを書くための第一歩となります。
また、h3タグはh2の下位レベルの見出しとして使うことが基本であり、ページ全体の階層構造を壊さないように配置することが大切です。学習記事、ブログ記事、FAQページ、手順説明ページなどさまざまな用途で、h3タグは話題の分割や読者の案内役として機能します。適切に使うことで、ページのナビゲーション性が向上し、ユーザーが必要な情報へすばやくアクセスしやすくなります。
さらに、CSSと組み合わせることで、h3タグの視覚的な明確さを高めることができます。文字サイズ、色、余白、枠線、背景などを調整することで、見出しの役割を視覚的にも強化でき、ページ全体の読みやすさやデザイン性が向上します。ただし、あくまでHTMLの構造とCSSによる装飾は別であるという前提を忘れず、意味に合った見出し構造を維持することが重要です。
誤りとしてよく見られるのは、見た目だけを目的にh3タグを使ってしまうケースや、見出しレベルを飛ばして配置してしまうケースです。これらは読み手にも支援技術にも混乱を与えかねないため、コンテンツの意味と階層を常に意識した書き方を心がける必要があります。
最後に、アクセシビリティの観点では、h3タグは情報構造をわかりやすく提示するための重要な手がかりとなります。スクリーンリーダーの利用者にとって、論理的な見出し構造はページ理解を大きく助けるものです。視覚的なデザインだけでなく、表示されない「構造」そのものがユーザー体験に影響を与えることを意識することで、より多くの人が快適に利用できるWebページを作り上げることができます。