h1～h6（見出し）タグ – 見出しを設定する｜HTML辞典
<h1>～<h6>タグとは？
<h1>～<h6>タグは、HTML文書に見出し（ヘッディング）を設定するためのタグです。<h1> が最も重要で大きな見出し、<h6> が最も小さな見出し となります。
検索エンジン（SEO）やページの構造化において、適切に使うことが重要です。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、見出しコンテンツ（Heading Content）
ページ内のセクションを明確にし、情報の階層を整理する役割を持ちます。
閉じタグの有無
<h1>～<h6>は、開始タグと閉じタグの両方が必要です。
例：
<h1>メインタイトル</h1>
<h2>サブタイトル</h2>基本的な記述方法
見出しタグは、ページの階層を明確にするために順序よく使用するのが推奨 されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>見出しの例</title>
</head>
<body>
<h1>メインタイトル</h1>
<h2>サブタイトル</h2>
<h3>小見出し</h3>
<h4>詳細な見出し</h4>
<h5>細かい項目</h5>
<h6>最も小さい見出し</h6>
</body>
</html>ポイント：
<h1>はページに1つだけ使用するのが推奨される（SEOの観点から）<h2>～<h6>は適切な階層構造を維持する
使用できる主な属性
見出しタグには特別な属性はありませんが、以下の一般的な属性を利用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
id | 一意の識別子を設定 | <h2 id="section1">セクション1</h2> |
class | CSSのクラスを適用 | <h1 class="main-title">タイトル</h1> |
style | インラインスタイルを適用 | <h3 style="color: blue;">青い見出し</h3> |
見出しタグのサイズ（デフォルトスタイル）
ブラウザのデフォルトスタイルでは、見出しごとに異なるフォントサイズが適用されます。
一般的なデフォルトのフォントサイズは以下の通りです（px単位）。
| タグ | サイズ（デフォルト） |
|---|---|
<h1> | 約 32px |
<h2> | 約 24px |
<h3> | 約 18.72px |
<h4> | 約 16px |
<h5> | 約 13.28px |
<h6> | 約 10.72px |
使用上の注意点
✅ <h1> はページに1つだけ使用する（SEO対策）
- 検索エンジンは
<h1>をページのタイトルとみなすため、1ページに1つだけ使用するのが推奨されます。 - 例えば、以下のような記述は NG です。
<h1>トップページ</h1> <h1>製品一覧</h1> <!-- NG：h1が複数ある -->
→ 代わりに<h2>を使うのが適切。
✅ 見出しの階層を守る
- 見出しタグは 適切な順序（
<h1>→<h2>→<h3>のように）で使うことが推奨されます。 - NG例（階層が飛んでいる）
<h1>メインタイトル</h1> <h3>サブタイトル</h3> <!-- NG：h2を飛ばしている -->
→ 正しくは<h2>を使用するべき。
✅ デザインのために見出しタグを乱用しない
- 見出しタグは 意味を持つ見出しにのみ使用 し、デザイン目的で使用するのは避けるべき。
スタイル調整はCSSで行うのが基本。.big-text { font-size: 32px; font-weight: bold; }
→<h1>の代わりに<span class="big-text">を使うことで、SEOを乱さずにデザインを適用できる。
関連タグ
まとめ
<h1>～<h6>タグは、HTML文書の見出しを設定し、ページの構造を明確にする役割を持ちます。
特に、SEOの観点から<h1>は1ページに1つ、階層構造を守ることが重要 です。
適切な見出しを設定することで、検索エンジンにもユーザーにも分かりやすいページを作ることができます。
