HTML5 セマンティック要素の使い分け
HTML5 で導入された article / section / nav / aside / header / footer / main といった「セマンティック要素」は、コンテンツの意味を機械（検索エンジン・スクリーンリーダー）に伝えるための重要な道具です。「とりあえず div で囲む」のではなく、適切な要素を使うことで、SEO・アクセシビリティ・コードの可読性すべてが向上します。この記事では、それぞれの要素の意味と使い分けを実例で解説します。
セマンティック要素一覧
| 要素 | 意味 | 典型的な用途 |
|---|---|---|
| header | 導入部・ヘッダー領域 | サイトヘッダー、記事の冒頭 |
| nav | 主要ナビゲーション | グローバルメニュー、サイドメニュー |
| main | ページのメインコンテンツ | 本文部分（1ページに1つ） |
| article | 独立して成立するコンテンツ | ブログ記事、ニュース、製品レビュー |
| section | テーマ別のまとまり | 記事内の章、長いページの分割 |
| aside | 関連性が薄い補助情報 | サイドバー、広告、関連リンク |
| footer | 末尾・補足情報 | サイトフッター、記事末の著者情報 |
| figure / figcaption | 図表とそのキャプション | 挿絵、引用画像、グラフ |
article vs section の決定的な違い
この2つは初心者が最も混同しやすい要素です。判別基準は明確です:
article: それ単独で意味が成立する
- 切り出して他のサイトに貼っても「読み物」として成立する
- 例: ブログ記事、ニュース記事、レビュー、フォーラム投稿
section: 大きな枠の中の意味的なまとまり
- 単独では文脈が成立しない（親要素を前提とする）
- 例: 記事内の章、製品紹介ページ内の「特徴」「価格」「FAQ」など
具体例
<article>
<h1>HTML5 セマンティック要素の使い分け</h1>
<p>リード文...</p>
<section>
<h2>article vs section</h2>
<p>...</p>
</section>
<section>
<h2>nav の使い方</h2>
<p>...</p>
</section>
</article>article（記事全体）の中に、章ごとの section が入っている構造です。
main は1ページに1つだけ
main はそのページの「主要コンテンツ」を表します。ヘッダー・フッター・ナビゲーション・サイドバーは含めません。
<header>サイトヘッダー</header>
<main>
<article>
<h1>記事タイトル</h1>
<p>本文...</p>
</article>
</main>
<aside>関連記事</aside>
<footer>サイトフッター</footer>スクリーンリーダーは「メインコンテンツへスキップ」する機能を提供します。main 要素があると、視覚障害ユーザーの読書体験が大幅に向上します。
nav は「主要な」ナビゲーションだけ
すべてのリンクのグループを nav で囲む必要はありません。ヘッダーのメニューやサイドナビゲーションのような サイト構造上重要なリンク群 のみが対象です。
記事内の「目次」もnavに含めるのが一般的です。逆に、ヘッダー内のロゴ単体やフッターのちょっとしたリンクは nav で囲まない方がベターです。
aside の本当の意味
aside は「補助的・関連性が薄い」というニュアンスを持ちます。サイドバーが定番の使い方ですが、本文中の「引用」「補足」「ヒント」ボックスにも使えます。
<article>
<p>本文...</p>
<aside>
<p>💡 ヒント: ここに関連する豆知識...</p>
</aside>
<p>本文続き...</p>
</article>header / footer は階層的に使える
これらは「サイト全体」だけでなく、article や section 単位でも使えます。
<article>
<header>
<h1>記事タイトル</h1>
<p class="meta">2026-05-30 / 著者名</p>
</header>
<p>本文...</p>
<footer>
<p>タグ: #WebAudio #JavaScript</p>
</footer>
</article>SEOへの直接的な影響
Google は公式に「セマンティックマークアップを推奨」しています。具体的な効果として:
- ページの意味理解が向上 → 関連クエリでの上位表示が起こりやすい
- 構造化データの土台 → JSON-LD で Article schema を書くとき、HTML 構造とマッチしていると整合性が高い
- 注目ピックアップ（Featured Snippet）採用率 → 適切な見出しと article 構造があると採用されやすい
アクセシビリティへの影響
スクリーンリーダーは セマンティック要素を「ランドマーク」として認識します。これによりユーザーは次のような操作ができます:
- 「メインコンテンツへスキップ」（main 要素へジャンプ）
- 「ナビゲーションへ移動」（nav 要素へジャンプ）
- 「次の見出しへ」（h2 要素へジャンプ）
div だらけのページではこれらが使えず、ユーザーが「ヘッダーを毎回読み飛ばす」必要が出てきます。
使い分けに迷ったときの判定フロー
- 独立した記事として成立する? → article
- 大きな枠の中の章? → section
- 主要ナビゲーション? → nav
- サイドバー・補助情報? → aside
- サイト/記事の冒頭・末尾? → header / footer
- ページの主要コンテンツ? → main
- 図・写真にキャプションが必要? → figure + figcaption
- どれにも当てはまらない? → 普通の div でOK
よくある間違い
1. 全部 section で囲む
section は「テーマ別の意味的グループ」専用です。装飾や CSS グルーピング用には div を使いましょう。
2. article の中に article を入れる
article は階層化できますが、ネスト構造に明確な意味が必要です。例えばコメント機能を持つブログでは、メインの記事内にコメント1件1件を article として埋め込みます。
3. nav に全てのリンクを入れる
nav は「主要な」ナビゲーション用です。本文中のリンクは普通の a タグでOK。
4. h1 を複数使う
HTML5 仕様上は article 内で別 h1 を使うことが許されていますが、SEO 観点では「ページに h1 は1つ」が今でも一般的に推奨されます。
まとめ
セマンティック要素を使うことは、「自分のサイトを機械に正しく理解してもらう」ための投資です。コストは div を変えるだけなので極めて小さい一方、SEO・アクセシビリティ・コードの可読性すべてに長期的な効果があります。「とりあえず div」を脱却して、意味のあるマークアップを書く習慣をつけましょう。