HTML セマンティック要素

Volardev 編集部 April 12, 2026

セマンティック要素とは、ブラウザと開発者の両方に対して、その要素が持つ「意味」を明確に伝える要素のことです。

1. セマンティック要素とは？

HTMLには、大きく分けて2種類の要素が存在します。

非セマンティック要素 (Non-semantic elements): その内容について何も伝えない要素。（例: <div> や <span>）
セマンティック要素 (Semantic elements): その内容を明確に定義する要素。（例: <form>、<table>、<article>）

HTML5が登場する前、開発者はレイアウトを作成するために id や class を付けた大量の div 要素（例: <div class="header">）を使用していました。しかし、HTML5では専用のタグが導入され、より構造的で分かりやすいマークアップが可能になりました。

2. 主要なセマンティック要素の役割

HTML5で導入された代表的なセマンティック要素と、その用途を以下の表にまとめました。

要素	説明
`<header>`	ドキュメントやセクションの導入部、またはナビゲーションリンクの集合を定義します。
`<nav>`	ナビゲーションリンク（メニュー）の主要なセットを定義します。
`<main>`	ドキュメントのメインコンテンツ（主要な内容）を指定します。ページ内に1つだけ存在すべきです。
`<section>`	ドキュメント内の「節（セクション）」を定義します。通常、見出しが含まれます。
`<article>`	それ自体で独立して完結しているコンテンツ（ブログ記事、ニュース等）を定義します。
`<aside>`	メインコンテンツとは別の、補足的な情報（サイドバー等）を定義します。
`<footer>`	ドキュメントやセクションのフッター（著作権情報、連絡先等）を定義します。
`<details>`	ユーザーが表示/非表示を切り替えられる追加の詳細情報を定義します。
`<summary>`	`<details>` 要素の可視見出しを定義します。
`<figure>`	イラスト、図表、写真、コードリストなどの自己完結したコンテンツを定義します。
`<figcaption>`	`<figure>` 要素に対するキャプション（説明文）を定義します。
`<time>`	日付や時刻を定義します。

3. <section> と <article> の使い分け

この2つは混同されやすいですが、以下の基準で使い分けるのが一般的です。

<article>: その部分だけを切り取って他のサイトに転載しても、内容が成立する独立したコンテンツ（ニュース、投稿、記事）。
<section>: ドキュメントを論理的に分割する単位。一つの記事の中に「概要」「詳細」「結論」といった章（セクション）がある場合などに適しています。

4. なぜセマンティック要素を使うのか？

プロフェッショナルなWeb制作において、セマンティック要素の使用はもはや義務と言えます。

アクセシビリティ (Accessibility): スクリーンリーダーを使用するユーザーが、ページの構造（どこがナビゲーションで、どこがメインか）を正しく理解できるようになります。
SEO (Search Engine Optimization): Googleなどの検索エンジンが、ページのどの部分が重要であるかを判断しやすくなり、検索順位の向上に寄与します。
メンテナンス性: コードを読んだだけで「ここがフッターだ」「ここが記事だ」と直感的にわかるため、チーム開発での効率が上がります。

5. 実装例：セマンティックなページ構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>セマンティックHTMLの例</title>
</head>
<body>

    <header>
        <h1>テックブログ</h1>
        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">記事一覧</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>セマンティックHTMLの重要性</h2>
            <p>公開日: <time datetime="2026-04-12">2026年4月12日</time></p>
            <section>
                <h3>1. SEOへの影響</h3>
                <p>検索エンジンは意味のあるタグを好みます...</p>
            </section>
        </article>
    </main>

    <aside>
        <h3>おすすめ記事</h3>
        <ul>
            <li>CSS Gridの使いかた</li>
        </ul>
    </aside>

    <footer>
        <p>© 2026 Tech Blog Inc.</p>
    </footer>

</body>
</html>

セマンティック要素を正しく使うことで、見た目は同じでも「中身の質」が全く異なる、モダンで堅牢なWebサイトを構築することができます。