実行できるHTMLドキュメント: 見出しタグ

Q: HTML の見出しタグはいくつありますか？

6 つです: 、 、 、 、 、 。 が最も重要 (ページのタイトル) で、 が最も低いレベルです。 はなく、そのようなタグは不明なインライン要素として扱われます。

Q: HTML の見出しの初期サイズは？

標準の 16px の文字では、ブラウザは h1 を 32px (2em)、h2 を 24px (1.5em)、h3 を 18.72px (1.17em)、h4 を 16px (1em)、h5 を 13.28px (0.83em)、h6 を 10.72px (0.67em) で表示し、すべて太字です。

Q: 1 ページに h1 を複数使ってもいいですか？

HTML としては許可されていますが、ページを表す を 1 つだけ置くのが、スクリーンリーダーの利用者にも検索エンジンにも最もわかりやすい構造です。その下の主なセクションには を使います。

Q: h2 から h4 のように見出しのレベルを飛ばしてもいいですか？

避けましょう。スクリーンリーダーの利用者は見出しのレベルで移動するので、h2 から h4 に飛ぶとセクションが抜けているように見えます。レベルは構成上の位置で選び、サイズは CSS で変えます。

Q: 見出しのサイズを変えるには？

CSS で font-size を指定します。たとえば h2 { font-size: 20px; } や、1 つの見出しにクラスを付けて指定します。初期サイズを理由に見出しのレベルを選んではいけません。

HTML 見出しタグ: h1 から h6 のサイズ、順番、スタイル

HTML には <h1> から <h6> まで 6 段階の見出しがあり、ページの骨組みを作ります。初期サイズ、見出しの順番、h1 をいくつ使うか、CSS でサイズを変える方法、スクリーンリーダーでの使われ方を解説します。

このページのコードはエディタで実行できます - 編集してすぐに結果を確認できます。

著者 Kevin Spektor, Co-founder & CTO

公開日：Sep 24, 2026

6 つの HTML 見出しタグ

HTML には <h1> から <h6> まで 6 段階の見出しがあります。<h1> が最上位 (ページのタイトル) で、<h6> が最下位です。ブラウザはレベルが下がるごとに小さく、すべて太字で、それぞれ別の行に表示します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

タグ	初期サイズ	16px の文字では
`<h1>`	2em	32px
`<h2>`	1.5em	24px
`<h3>`	1.17em	18.72px
`<h4>`	1em	16px
`<h5>`	0.83em	13.28px
`<h6>`	0.67em	10.72px

<h5> と <h6> は初期状態で本文より小さく、意外に思う人が多い点です。サイズはあくまで初期値で、次のセクションで説明するように、レベルをサイズで選んではいけません。

見出しはページの骨組み

見出しは飾りではありません。見出し全体で、本の目次のようにページの骨組みを作ります。スクリーンリーダーの利用者は見出しから見出しへ移動して目的の内容を探し、検索エンジンは見出しを読んでページの話題を理解します。

ルールは単純です。ページのタイトルに <h1> を 1 つ、主なセクションごとに <h2>、<h2> の中の小見出しに <h3>、という具合にレベルを飛ばさずに使います。次の例は、支援技術と同じように見出しから目次を組み立てます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

2 つ目の <h3> を <h5> に変えると、骨組みに抜けができます。見出しで移動している人は h4 がどこに行ったのか戸惑うでしょう。

見出しのサイズを変える

レベルは構成上の位置で選び、見た目は CSS で決めます。サイドバーのタイトルは <h2> でも小さく見せたいことがあり、トップのタイトルは <h1> でとても大きくしたいこともあります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

逆も同じです。テキストを大きくしたり太字にしたりするためだけに見出しタグを使ってはいけません。文の中で太字にしたい語句には <strong> を、見出しではない大きなテキストにはクラスを付けた <p> を使います。テキスト用のタグは太字のページを参照してください。

サブタイトルとキャッチコピー

見出しのすぐ下にあるサブタイトルは、普通は見出しではありません。新しいセクションを始めるものではないからです。段落を使い、必要なら <hgroup> で 2 つをまとめます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

骨組みはきれいなまま (h1 が 1 つ、その下に h2 のセクション) で、キャッチコピーも見た目の上ではタイトルと一緒に並びます。

見出しへのリンク

見出しに id を付けると、href に #id を含むリンクからその見出しへ直接移動できます。目次や「セクションへのリンクをコピー」ボタンはこの仕組みで動いています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

よくある間違い

サイズでレベルを選ぶ。 構成上の位置で選び、CSS でスタイルを付けましょう。
レベルを飛ばす。 <h2> から <h4> に飛ぶと、スクリーンリーダーの利用者の移動が妨げられます。
強調のために見出しを使う。 段落の中の太字の行は <strong> で、<h4> ではありません。
<h1> がない、またはロゴだけが <h1>。 <h1> には記事や商品のタイトルなど、ページの内容を表す名前を入れましょう。
空の見出し。 アイコンだけ、または何も入っていない見出しは空として読み上げられます。実際のテキストを入れましょう。

よくある質問

HTML の見出しタグはいくつありますか？

6 つです: <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。<h1> が最も重要 (ページのタイトル) で、<h6> が最も低いレベルです。<h7> はなく、そのようなタグは不明なインライン要素として扱われます。

HTML の見出しの初期サイズは？

標準の 16px の文字では、ブラウザは h1 を 32px (2em)、h2 を 24px (1.5em)、h3 を 18.72px (1.17em)、h4 を 16px (1em)、h5 を 13.28px (0.83em)、h6 を 10.72px (0.67em) で表示し、すべて太字です。

1 ページに h1 を複数使ってもいいですか？

HTML としては許可されていますが、ページを表す <h1> を 1 つだけ置くのが、スクリーンリーダーの利用者にも検索エンジンにも最もわかりやすい構造です。その下の主なセクションには <h2> を使います。

h2 から h4 のように見出しのレベルを飛ばしてもいいですか？

避けましょう。スクリーンリーダーの利用者は見出しのレベルで移動するので、h2 から h4 に飛ぶとセクションが抜けているように見えます。レベルは構成上の位置で選び、サイズは CSS で変えます。

見出しのサイズを変えるには？

CSS で font-size を指定します。たとえば h2 { font-size: 20px; } や、1 つの見出しにクラスを付けて指定します。初期サイズを理由に見出しのレベルを選んではいけません。