見出し構造とセマンティックHTMLを正しく理解する
HTMLでセマンティックな構造を設計するうえで、よく出てくる言葉があります。
アウトライン（Outline）
これは簡単に言うと、
ページの「目次構造」
のことです。
例えば本には必ず目次がありますよね。
第1章
1.1
1.2
第2章
2.1
HTMLでも同じように、
見出しとセクションによって文書構造が作られます。
この記事では
- アウトラインアルゴリズムとは何か
- 見出し構造の正しい作り方
<section>や<article>との関係- よくある誤解
を、実務目線でわかりやすく解説します。
アウトラインとは何か？
HTMLのアウトラインとは、
見出しタグによって構築される文書構造
です。
例えば次のHTML。
<h1>HTML入門</h1><h2>基本構造</h2><h2>タグの種類</h2><h3>ブロック要素</h3><h3>インライン要素</h3>
アウトラインはこうなります。
h1 HTML入門
├ h2 基本構造
└ h2 タグの種類
├ h3 ブロック要素
└ h3 インライン要素
これがページの論理構造です。
アウトラインアルゴリズムとは？
HTML5では、
<section><article><nav><aside>
などのセクショニング要素によって
アウトラインが自動生成されるという仕様がありました。
これを
HTMLアウトラインアルゴリズム
と呼びます。
しかし重要な事実
実は現在、
アウトラインアルゴリズムはブラウザで実装されていません。
つまり、
<section>
<h1>タイトル</h1>
</section>
のように書いても、
ブラウザやSEOが
自動的に階層を再構築することはありません。
そのため実務では、
見出しレベルを正しく使うことが最重要
になります。
見出し構造の基本ルール
HTMLには6段階の見出しがあります。
h1
h2
h3
h4
h5
h6
基本構造はこうです。
h1 ページタイトル
├ h2 セクション
│ ├ h3 サブセクション
│ └ h3 サブセクション
└ h2 セクション
正しい例
<h1>Web制作入門</h1><h2>HTMLとは</h2>
<p>説明</p><h2>CSSとは</h2><h3>レイアウト</h3><h3>装飾</h3>
階層が自然です。
よくある間違い
見出しジャンプ
<h1>タイトル</h1>
<h4>説明</h4>
これはアウトラインが崩れます。
見た目で見出しを使う
<h2 class="big-title">
見出しはデザインのためのタグではありません。
<section> とアウトライン
<section> は
新しいテーマのブロック
です。
そのため通常は見出しが必要です。
<section>
<h2>サービス</h2>
</section>
<article> とアウトライン
<article> は
独立したコンテンツ
です。
ブログ記事なら：
<article><h1>記事タイトル</h1><section>
<h2>導入</h2>
</section><section>
<h2>まとめ</h2>
</section></article>
理想的なページ構造
header
main
├ section
│ ├ article
│ └ article
├ section
│ ├ article
│ └ article
aside
footer
これがセマンティックHTMLの基本構造です。
SEOとの関係
検索エンジンは
- 見出し
- セクション
- コンテンツ構造
を使ってページ内容を理解します。
つまり、
アウトラインが整理されているページは理解されやすい
と言えます。
ただし、
h1が1つじゃないとダメ
というルールは現在ありません。
実務のおすすめ構造
ページ
h1
├ h2
│ ├ h3
│ └ h3
└ h2
ブログ記事
h1 記事タイトル
├ h2 見出し
│ ├ h3
│ └ h3
└ h2
実務チェックリスト
ページ作成時は次を確認。
- h1はページテーマになっているか
- 見出しレベルが飛んでいないか
- sectionに見出しがあるか
- articleは独立コンテンツか
まとめ
アウトラインアルゴリズムの本質は、
見出しで文書構造を作ること
です。
重要ポイント：
- 見出し階層を守る
- sectionには見出し
- articleは独立コンテンツ
- デザイン目的で見出しを使わない
これだけでHTMLの質は大きく変わります。
最後に
セマンティックHTMLは、
SEOのためだけの技術ではありません。
- 読みやすいコード
- アクセシビリティ
- 長期保守
- チーム開発
すべてに影響します。