HTML5セマンティック要素入門
意味のあるマークアップで構造化する
HTML5のセマンティック要素を使って、意味のある構造化されたWebページを作る方法を解説。SEOとアクセシビリティにも効果的です。
こんな人向けの記事です
- HTMLのセマンティック要素を正しく使いたい
- divの代わりに適切な要素を選びたい
- SEOやアクセシビリティを改善したい
Step 1セマンティックHTMLとは
セマンティック（semantic）とは「意味のある」という意味です。セマンティックHTMLとは、ページの構造や内容の意味をタグ自体で表現するマークアップ方法です。
従来は <div> と <span> で何でも囲んでいましたが、これではブラウザや検索エンジンが「その部分が何なのか」を理解できません。HTML5で導入されたセマンティック要素を使うことで、構造に意味を持たせることができます。
<!-- 非セマンティック（意味がない） -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>
<!-- セマンティック（意味がある） -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>セマンティック要素を使うメリットは大きく3つあります：
- 検索エンジン（SEO） — Googleなどがページ構造を正確に理解できる
- アクセシビリティ — スクリーンリーダーが適切にナビゲーションできる
- メンテナンス性 — コードを読むだけで構造がわかる
<div> 自体が悪いわけではありません。レイアウトやスタイル目的で使うのは問題ありません。ただし、ページの構造的な意味がある場所には、適切なセマンティック要素を使いましょう。
Step 2header, nav, main, footer
ページ全体の構造を表す4つの基本要素です。これらを組み合わせることで、ページのレイアウト構造を意味的に表現できます。
<header>
<h1>サイトのタイトル・ロゴ</h1>
</header>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/articles">記事一覧</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
<main>
<h2>ページのメインコンテンツ</h2>
<p>ページに1つだけ配置する。主要なコンテンツを囲む。</p>
</main>
<footer>
<p>© 2026 サイト名</p>
</footer>それぞれの要素の役割を整理します：
<header>— ページやセクションのヘッダー。ロゴ、タイトル、ナビゲーションなどを含む<nav>— ナビゲーションリンクのまとまり。メインメニュー、パンくずリストなど<main>— ページの主要コンテンツ。1ページに1つだけ使用する<footer>— ページやセクションのフッター。著作権表示、連絡先情報など
<main> 要素は1つのページに1回だけ使えます。また、<article>、<aside>、<header>、<footer>、<nav> の子要素にはできません。
Step 3article, section, aside
コンテンツの論理的なグループ分けに使う要素です。これらを正しく使い分けることで、ページの内容構造が明確になります。
- 記事A
- 記事B
<main>
<article>
<h2>ブログ記事タイトル</h2>
<time datetime="2026-02-18">2026年2月18日</time>
<section>
<h3>第1章</h3>
<p>第1章の内容...</p>
</section>
<section>
<h3>第2章</h3>
<p>第2章の内容...</p>
</section>
</article>
<aside>
<h3>関連記事</h3>
<ul>
<li>記事A</li>
<li>記事B</li>
</ul>
</aside>
</main>使い分けのポイント：
<article>— 独立して完結するコンテンツ。ブログ記事、ニュース記事、コメントなど。RSSフィードで配信しても意味が通じるかが判断基準<section>— テーマ的にまとまったグループ。通常は見出しを伴う。章、タブパネルなど<aside>— 主要コンテンツに関連するが独立した情報。サイドバー、補足説明、広告など
ブログ記事（<article>）の中にコメント（<article>）をネストすることも仕様上有効です。それぞれが独立したコンテンツであれば問題ありません。
Step 4figure, figcaption
<figure> は画像、図表、コードブロックなどの「参照される独立したコンテンツ」を囲む要素です。<figcaption> でキャプション（説明文）をつけることができます。
<figure>
<img src="semantic-structure.png"
alt="セマンティック要素の関係図">
<figcaption>図1: セマンティック要素の関係図</figcaption>
</figure>
<!-- コードブロックにも使える -->
<figure>
<pre><code>const greeting = "Hello";</code></pre>
<figcaption>リスト1: JavaScriptの変数宣言</figcaption>
</figure>
<!-- 複数画像のギャラリーにも -->
<figure>
<img src="photo1.jpg" alt="写真1">
<img src="photo2.jpg" alt="写真2">
<figcaption>2026年のイベント写真</figcaption>
</figure><figure> のポイント：
- 本文から参照される独立したコンテンツに使う（「図1を参照」のように）
- 画像だけでなく、コード例、引用、表など何でも囲める
<figcaption>は<figure>の最初か最後の子要素として配置する- 単なる装飾画像には使わない（装飾は
<img>や CSS で対応）
alt 属性は画像が表示できないときの代替テキストです。<figcaption> は画像の説明やキャプションで、画像と一緒に表示されます。両方とも設定するのが推奨です。
Step 5details, summary
<details> と <summary> は、JavaScriptなしで開閉できるアコーディオンを作れる要素です。FAQ、補足情報、長いコード例の折りたたみに便利です。
セマンティック要素は何種類ある？
古いブラウザでも使える？
open属性で最初から開いた状態にできる
<details open> を使っているため、最初から開いた状態で表示されています。<!-- 基本的な使い方 -->
<details>
<summary>セマンティック要素は何種類ある？</summary>
<p>HTML5では約30種類のセマンティック要素が
定義されています。代表的なものとして header,
nav, main, footer, article, section, aside,
figure, details などがあります。</p>
</details>
<details>
<summary>古いブラウザでも使える？</summary>
<p>主要なモダンブラウザでは完全にサポート
されています。IE11では details/summary が
未対応ですが、ポリフィルで対応可能です。</p>
</details>
<!-- open属性で最初から開く -->
<details open>
<summary>open属性で最初から開いた状態にできる</summary>
<p>この項目は最初から開いた状態で表示されます。</p>
</details><details> / <summary> の特徴：
- JavaScriptが不要 — ブラウザのネイティブ機能で開閉できる
open属性を付けると最初から開いた状態になる- FAQ、用語集、トラブルシューティングなどに最適
<summary>がないと、ブラウザがデフォルトで「詳細」と表示する
<summary> は <details> の最初の子要素として配置してください。それ以外の位置に置くと、ブラウザの挙動が不安定になることがあります。
Step 6SEOとアクセシビリティへの効果
セマンティック要素を正しく使うことで、SEO（検索エンジン最適化）とアクセシビリティの両方が向上します。
SEOへの効果
検索エンジンのクローラーは、セマンティック要素をもとにページ構造を理解します。
<nav> → ナビゲーションリンク（サイトリンクとして表示される可能性）<main> → メインコンテンツ（インデックスの優先対象）<article> → 独立記事（リッチスニペット候補）<aside> → 補足情報（ランキングへの影響が低い）<!-- SEO最適化されたページ構造 -->
<header>
<h1>サイト名</h1>
<nav aria-label="メインメニュー">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/blog">ブログ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>記事タイトル</h2>
<time datetime="2026-02-18">2026年2月18日</time>
<section>
<h3>セクション見出し</h3>
<p>本文...</p>
</section>
</article>
<aside aria-label="関連情報">
<h3>関連記事</h3>
<ul>...</ul>
</aside>
</main>
<footer>
<p>© 2026 サイト名</p>
</footer>アクセシビリティへの効果
セマンティック要素は、ARIA（Accessible Rich Internet Applications）のランドマークロールに自動的にマッピングされます。
| セマンティック要素 | ARIAロール | スクリーンリーダーの挙動 |
|---|---|---|
<header> |
banner |
「バナー」として認識。ページ先頭にジャンプできる |
<nav> |
navigation |
「ナビゲーション」として一覧表示・ジャンプできる |
<main> |
main |
ショートカットキーで直接ジャンプできる |
<aside> |
complementary |
「補足情報」として認識される |
<footer> |
contentinfo |
「コンテンツ情報」として認識される |
ページに複数の <nav> がある場合、aria-label を付けてスクリーンリーダーが区別できるようにしましょう。例: <nav aria-label="メインメニュー">、<nav aria-label="パンくずリスト">
セマンティック要素の選び方フローチャート
迷ったときは以下のフローチャートで判断しましょう：
- そのコンテンツは独立して意味を持つか？ →
<article> - テーマ的なまとまりがあるか？ →
<section> - 主要コンテンツの補足情報か？ →
<aside> - ナビゲーションリンクの集まりか？ →
<nav> - 上記に当てはまらない →
<div>（スタイル目的のコンテナ）
まとめ
- セマンティックHTMLは「意味のあるタグ」でページ構造を表現する方法
<header>/<nav>/<main>/<footer>でページ全体の構造を定義する<article>（独立コンテンツ）、<section>（テーマのまとまり）、<aside>（補足情報）でコンテンツを分類する<figure>+<figcaption>で画像やコードにキャプションを付ける<details>+<summary>でJavaScript不要のアコーディオンを作れる- セマンティック要素はSEO・アクセシビリティ・コードの可読性すべてに貢献する
- 迷ったら「この部分が何なのか」を考え、意味に合った要素を選ぶ。該当しなければ
<div>