HTMLアウトラインアルゴリズム完全解説

Posted on by

見出し構造とセマンティック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のためだけの技術ではありません。

  • 読みやすいコード
  • アクセシビリティ
  • 長期保守
  • チーム開発

すべてに影響します。