HTML

この記事では、<h1>から<h6>までの見出し要素で文章の階層を示す方法と、読みやすさ・SEO・アクセシビリティとの関係を初心者向けに説明します。

In HTML, the h1 through h6 elements are tags used to present headings in a hierarchical manner, clarifying a webpage’s structure and improving readability, SEO, and accessibility.

h1～h6 要素

HTMLの見出し要素（Heading Elements）は、Webページの構造をわかりやすくするために欠かせないタグです。<h1>から<h6>まで6つの段階があり、文章の階層的な構造を伝える重要な役割を担います。

見出し要素とは何か？

見出し要素の役割

見出し要素とは、HTMLドキュメント内でコンテンツのタイトルや重要な項目を明示するために使うタグです。たとえば、新聞や雑誌の記事で「大きな文字で書かれているタイトル」や、「章のタイトル」を思い浮かべるとわかりやすいでしょう。ブラウザや支援技術（スクリーンリーダーなど）は、これらの見出しを使って文章構造を解釈し、読み上げの順序や目次の生成などに活用します。

見出し要素のバリエーション

HTMLでは、<h1>から<h6>までの6段階の見出しが定義されています。数字が小さいほど上位レベル（最重要）で、数字が大きいほど下位レベル（重要度が低い）を表します。

<h1>

ページ内で最も重要な見出しやタイトル。通常は1ページに1つが理想的。

<h2>

ページ内のセクションや章の見出し。

<h3>

サブセクションの見出し。

<h4>

より細かいレベルの区分け。

<h5>

小見出しや細分化した項目。

<h6>

見出し要素の中で最下位レベル。

HTML4の頃から存在する要素ですが、HTML5以降でも見出しの概念は変わっておらず、基本的な使い方は同じです。

基本的な使い方

シンプルな例

<h1>メインタイトル</h1>
<p>このページのメインテーマを端的に示す見出しです。</p>

<h2>セクション1</h2>
<p>これはセクション1の内容に相当する段落です。</p>

<h3>サブセクション1-1</h3>
<p>サブセクションに関する詳しい情報をここに書きます。</p>

<h2>セクション2</h2>
<p>これはセクション2の内容に相当する段落です。</p>

上記の例は、ページ全体の主題を<h1>で示し、その下に<h2>や<h3>を使って段階的に区分しています。ブラウザ上で見ると、<h1>が一番大きな文字で表示され、<h2>はそれより少し小さく、<h3>はさらに小さく表示されるのが一般的なデフォルトのスタイルです（ただし、表示の大きさはCSSなどで自由に変更できます）。

ページ内での階層構造

見出し要素は、文章の論理的構造を表すために用いられます。適切に階層を割り振ることで、ページを読む人にも、機械（検索エンジンや支援技術）にも内容を理解しやすくします。階層は必ずしも連番を順序通りに使わなければいけないわけではありませんが、一般的には下記のように<h2>の次に<h3>と繰り下げていくことが多いです。

単に文字を大きくするためだけに<h1>を多用すると、文書全体の意味がわかりにくくなり、検索エンジンやスクリーンリーダーにとっても混乱の原因となります。

ベストプラクティス

1ページ1つの<h1>

• かつては「ページ中に<h1>は1回しか使ってはいけない」というルールが推奨されてきました。HTML5では技術仕様として厳密な制限はなくなりましたが、多くのSEO専門家やアクセスビリティの観点からは、現在でも「1ページにつき1つの<h1>」を守る方が無難だと言われています。
• 理由は、ページ内で最も重要なタイトル（メイン見出し）を一意に示すのが自然であり、ユーザーや検索エンジンにとってわかりやすいからです。

階層は飛ばさない

• <h2>があるのにいきなり<h4>を使うと、階層が飛んでしまい論理構造が不明瞭になる可能性があります。実際には技術的に不正ではありませんが、情報を整理しにくくなるため、あまり推奨されません。
• 特定のデザインや要件で<h4>のスタイルをそのまま見た目として使いたい場合は、見出し要素によらずCSSでフォントサイズや太さを調整するのがおすすめです。

キーワードの乱用は避ける

• SEOを意識して見出しにキーワードを詰め込みすぎると、かえって検索エンジンの評価を下げる可能性があります。読者にもわかりやすい自然な文章で見出しを構成しましょう。
• 検索エンジンは見出し要素を重要視する傾向がありますが、その最も大きな理由は「文書の構造や主要テーマを確認する」のが目的であり、キーワードを濫用することではありません。

SEOへの影響

見出し要素の重要性

検索エンジン（特にGoogle）は、見出しをページの内容を判断する一つのシグナルとして活用します。以下の点を押さえておくとよいでしょう。

ページの全体像

<h1>によって、そのページの主題を示す。

セクションの内容

<h2>、<h3>などがそれぞれのサブトピックを明示する。

見出しに適切なキーワードを配置すると、検索エンジンにも読者にも「このセクションは何を扱っているのか」がわかりやすく伝わります。

見出しの文字数や書き方

文字数

見出し要素の文字数制限は明確にはありませんが、あまりに長文を見出しとして置くと、可読性が下がるだけでなく、検索結果に表示されない可能性も高くなります。要点を簡潔にまとめることが大切です。

書き方

無理に文章化するよりも、セクションのテーマを端的に示す見出しが好まれます。読者が見出しだけで大まかな内容をつかめるように心がけましょう。

リッチスニペット（構造化データ）

• 見出し要素自体は、構造化データ（Schema.orgなど）のマークアップではありませんが、ページの論理構造を整理した上で適切に構造化データを組み合わせることで、検索結果がリッチスニペットとして表示される可能性が高まります。
• たとえば、記事全体を<article>タグで囲み、その中に見出しを適切に配置しつつArticle構造化データを付与するなどの工夫が有効です。

アクセシビリティの観点

スクリーンリーダーの読み上げ

見出し要素が正しく配置されていると、スクリーンリーダーを利用するユーザーは見出しだけを抽出して飛ばし読みができます。たとえば、h1 → h2 → h3 → h2 → h3という順に読み上げられるため、ページ全体の内容を把握しやすくなります。逆に見出しのレベルがめちゃくちゃだったり過剰に重複したりすると、利用者に混乱を与える恐れがあるので注意が必要です。

テキストの適切な構造化

見た目重視で無理に見出し要素を使うのではなく、**文書の構造（セマンティクス）に基づいて見出しを設定しましょう。アクセシビリティ向上の基本は、「論理的でわかりやすい文書構造」**です。

スタイルとデザインのカスタマイズ

CSSを使ったスタイリング

HTMLが提供する見出し要素のデフォルトスタイルはシンプルですが、以下のようにCSSを使って自由にカスタマイズできます。

h1 {
	font-size: 2.5em; /* フォントサイズを大きくする */
	font-weight: bold; /* 太字 */
	color: #333; /* 文字色 */
	margin-top: 0.5em; /* 上部マージン */
	margin-bottom: 0.5em; /* 下部マージン */
}

h2 {
	font-size: 2em;
	border-bottom: 2px solid #ccc; /* 見出しの下に線を引く */
	padding-bottom: 0.3em;
}

h3 {
	font-size: 1.5em;
	color: #666;
}

デザインとセマンティクスの分離

• HTMLの役割はあくまで「文書の構造をマークアップすること」であり、「デザインや見た目」を担うのはCSSです。
• デザインの都合で小さめの見出しスタイルが欲しい場合でも、論理構造としては<h2>や<h3>など階層に合ったタグを使い、見た目だけをCSSでコントロールするのが理想的です。

よくある誤解と注意点

<h1>を複数使ってはいけない？

HTML5の仕様としては「1ページに<h1>が複数あってもエラーではない」とされています。ただし、それぞれが別のセクションを表している場合に限られることが多く、読み手や検索エンジンに誤解を与えないかを考える必要があります。通常は「メインタイトル」1つに限定し、その下位に<h2>, <h3>... を用いる方が明確です。

<div>で代用してもいい？

<div>はセクションを区切る汎用的なコンテナ要素であり、見出しそのものの役割は持ちません。見出しテキストを大きく見せたいだけなら<div>にCSSを当てる方法も可能ですが、意味論的には正しい使い方ではないという点に注意が必要です。

見た目だけで判断してはいけない

WordPressなどのCMSでは、テーマやプラグインによって見出し要素のスタイルが変わる場合があります。見た目の大きさで「これは<h2>っぽい」と思っていても、実際のHTMLでは<h3>になっていたりするケースもあるので、編集画面のソースを確認すると確実です。

上級者向けトピックス

コンポーネント単位での見出し管理

大型サイトやWebアプリケーションでは、コンポーネント化されたUIを使うことが多くなります。たとえば、ReactやVue.jsなどのフレームワークを用いている場合、コンポーネント単位で見出しをどう管理するかが課題になります。

コンポーネントの再利用性

どの階層でも使えるように設計する必要がある。

動的生成

コンテンツによって動的に<h2>や<h3>などを切り替えるロジックを持たせるか、もしくは親から「見出しのレベル」をプロパティとして受け取る形にするかなど、設計が必要です。

ARIA属性との併用

role="heading"属性を使って、画面上では見出しのように見えない要素でも、支援技術に対して見出しであることを伝えることができます。たとえば、次のような例です。

<div role="heading" aria-level="2">このテキストは見出しとして認識される</div>

ただし、単純にHTMLの見出し要素を使える場合はそれで済ませるのがベストです。ARIA属性はあくまで補足的な手段であり、「ネイティブに用意された要素で対処できるならそちらを優先する」というのが基本的な考え方です。

リッチテキストエディタ（WYSIWYG）の活用

WordPressや、その他CMSのリッチテキストエディタでは、見出しを簡単に挿入できるボタンが用意されています。ライターや編集者の方々に構造化された文章を書いてもらうには、「見出し」を正しく設定する方法をガイドすることが重要です。

まとめ

HTMLの<h1>～<h6>要素は、Webページの論理構造や可読性、そしてSEOやアクセシビリティにも大きく関わる重要なタグです。次のポイントを押さえておくと、より使いやすく、よりわかりやすい文書が書けるようになります。

階層構造を意識する

見出しレベルを適切に使い分けることで、読み手も機械も文章の構造を把握しやすくなります。

<h1>はページの主要タイトルとして1つが理想

ページの主題を端的に示し、それ以下の階層に<h2>～<h6>を使ってまとめましょう。

SEO・アクセスビリティへの配慮

見出し要素は検索エンジンに文書構造を伝えるだけでなく、スクリーンリーダーの利用者にも大切な手がかりになります。

デザインはCSSで行う

見出しの見た目を変えるためにタグを乱用しない。構造はHTML、見た目はCSSで担保しましょう。

上級者はARIAやコンポーネント設計も視野に

大規模サイトや動的サイトでは、見出しのレベルをどう扱うか、支援技術への対応をどうするかなど、より高度な設計が必要になります。

適切な見出し要素の使い方を理解すれば、ユーザーにとっても検索エンジンにとっても見やすく、意味のあるWebページを作ることができます。