HTMLの見出しタグ（h1〜h6）の正しい使い方｜文書構造とSEOの基本

2025.12.18

HTMLの見出しタグ（h1〜h6）は、Webページの構造を明確にし、検索エンジンや支援技術に内容を正しく伝えるために欠かせない要素です。
見た目だけで使われてしまうこともありますが、本来は文書構造を表現するためのタグとして使う必要があります。

本記事では、HTMLの見出しタグの基本から正しい使い分け、よくある誤解までを体系的に解説します。

Contents

見出しタグ（h1〜h6）とは何か

見出しタグは、HTML文書の中で章や節のタイトルを表すためのタグです。

数値が小さいほど重要度が高く、文書の階層構造を示します。

HTMLの基本的な構造については、
**「HTMLの基本構造とタグの役割」**の記事も参考になります。

h1タグは、そのページ全体が何について書かれているかを示す、最上位の見出しです。
基本的には、1ページにつき1つ使用します。

<h1>HTMLの見出しタグの正しい使い方</h1>

h1を複数使うと、文書の主題が不明確になり、検索エンジンやスクリーンリーダーに誤解を与える可能性があります。
文書構造を明確に保つため、h1はページの最上位見出しとして扱います。

サイト全体の構造と見出しの関係については、
**「header要素と見出しタグの役割」**の記事も参考になります。

見出しタグは、階層を飛ばさずに順番に使うことが基本です。

正しい例：

<h1>記事タイトル</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>

避けたい例：

<h1>記事タイトル</h1>
<h3>いきなりh3</h3>

このような使い方は、文書構造が崩れる原因になります。

見出しタグは意味（構造）を表すものであり、文字の大きさを決めるためのものではありません。
見た目の調整はCSSで行います。

h3 {
  font-size: 24px;
}

このように、構造はHTML、デザインはCSSと役割を分けることが重要です。

CSS設計の考え方については、
**「CSSレイアウト設計の基本」**の記事も参考になります。

sectionやarticle要素の中では、その要素内の見出しとしてh2やh3が使われるのが一般的です。

<article>
  <h2>章タイトル</h2>
  <section>
    <h3>節タイトル</h3>
  </section>
</article>

これにより、HTML文書の論理構造が明確になります。

セクショニング要素の詳しい使い分けは、
**「section要素とarticle要素の違い」**の記事も参考になります。

検索エンジンは、見出しタグを使ってページの構造や重要なテーマを理解します。
適切な見出し構造は、内容の理解を助け、SEOの土台となります。

スクリーンリーダーでは、見出しタグを使ってページ内を移動します。
論理的な見出し構造は、すべての利用者にとって読みやすいページにつながります。

アクセシビリティの基本については、
**「Webアクセシビリティの基礎知識」**の記事も参考になります。

これらは、文書構造を崩す原因となるため注意が必要です。

HTMLの見出しタグ（h1〜h6）は、文書構造を表現するための重要な要素です。

正しい見出し構造を意識することで、読みやすく、伝わりやすいWebページを作成できます。
HTMLの基礎を固める第一歩として、見出しタグの使い方を正しく理解しておくことが重要です。