タイトル: h1～h6要素
h1～h6要素の記事です。HTML文書の見出しを表す要素で、ページの構造を読み手・検索エンジン・スクリーンリーダー全てに伝える最重要要素のひとつです。
h1〜h6要素の基本
| 要素 | 意味 | 典型用途 |
|---|---|---|
| 最上位の見出し | ページタイトル（記事タイトル） |
| 大見出し | 章・主要セクションのタイトル |
| 中見出し | 章内の節 |
| 小見出し | 項目内の小分け |
| さらに小さい見出し | あまり使わない |
| 最も小さい見出し | ほぼ使わない |
使用例
|
|
正しい使い方のルール
- 順序を飛ばさない:
h1→h2→h3...と段階的に。h1からいきなりh4はNG - 装飾目的で使わない: 大きく見せたいだけなら CSS で
font-sizeを使う - 1ページに
h1は1つが原則（HTML5では複数でも仕様上は可だが、SEO観点では1つが推奨） - 意味のある見出しテキストを入れる（「ページタイトル」だけでなく具体的なテーマを記載）
- セクション内の見出しは
や内で再スタート可
SEO・アクセシビリティでの重要性
- 検索エンジンは
h1〜h6でページの主題と構造を理解する - スクリーンリーダーは見出し単位でジャンプできる（H/Shift+Hキー等）
- 抜粋・概要を生成する際にも見出し階層が活用される
- 目次の自動生成: 多くのCMSが見出しから目次を作る
既定のスタイル（ブラウザ既定）
各見出しはブラウザのデフォルトCSSで大きさ・上下マージンが決まっています。例（標準的なブラウザ）:
| 要素 | 既定font-size |
|---|---|
h1 | 2em（32px相当） |
h2 | 1.5em（24px相当） |
h3 | 1.17em |
h4 | 1em |
h5 | 0.83em |
h6 | 0.67em |
サイト全体で統一感を出すなら、CSS reset 後に自前で見出しスタイルを定義します。
よくある失敗
- 装飾だけのために
h1— "太く大きく見せたい"だけなら等 - 同一ページに
h1が複数 — SEO評価が分散する場合あり - 飛ばし（h1 → h3） — アクセシビリティが落ちる
- 空の見出し —
はバリデーション警告