HTML セマンティックHTMLとは？意味を持つタグの基本を解説

先生と生徒の会話形式で理解しよう

生徒

「セマンティックHTMLって何ですか？難しそうな言葉ですね。」

先生

「セマンティックとは『意味的な』という意味で、タグそのものに意味を持たせたHTMLのことなんですよ。」

生徒

「divタグで全部作るのと何が違うんですか？見た目は同じになりますよね？」

先生

「見た目は同じでも、検索エンジンやスクリーンリーダーなどの機械が、ページの構造を理解しやすくなるんです。SEO対策やアクセシビリティの向上に大きく貢献します。それでは詳しく見ていきましょう！」

1. セマンティックHTMLの基本概念

セマンティックHTMLとは、タグ自体が意味を持つHTMLの書き方のことです。「セマンティック（semantic）」は日本語で「意味論的な」という意味で、HTML要素が単なる見た目の装飾ではなく、コンテンツの意味や役割を表現することを指します。例えば、headerタグは「ここはヘッダー部分ですよ」、articleタグは「ここは記事の本文ですよ」と、タグ名を見るだけで内容の役割がわかるようになっています。

以前のHTML（HTML4以前）では、divタグとspanタグを使ってページ全体を作り、CSSで見た目を整えるという方法が一般的でした。しかし、この方法だと人間には見た目で理解できても、検索エンジンのロボットや音声読み上げソフトなどの機械には、どこが重要な部分なのか、どこがナビゲーションなのかが判断できませんでした。HTML5からは、header、nav、main、article、section、aside、footerといったセマンティックタグが導入され、機械にも理解しやすいWebページを作れるようになったのです。これは、家の設計図に例えると分かりやすいでしょう。「部屋1」「部屋2」と書くよりも、「リビング」「キッチン」「寝室」と書く方が、誰が見ても部屋の用途がわかりますよね。


<!-- 昔のHTML：divばかりで意味が分からない -->
<div id="header">
    <div id="logo">サイト名</div>
    <div id="menu">メニュー</div>
</div>
<div id="content">
    <div class="post">記事の内容</div>
</div>
<div id="footer">フッター</div>

<!-- セマンティックHTML：タグ名で役割が分かる -->
<header>
    <h1>サイト名</h1>
    <nav>メニュー</nav>
</header>
<main>
    <article>記事の内容</article>
</main>
<footer>フッター</footer>

ブラウザ表示

この例を見ると、セマンティックHTMLの方が、タグ名だけでページの構造が理解できることがわかります。検索エンジンもこの構造を読み取って、適切に評価してくれます。

ポイント：セマンティックHTMLは、人間だけでなく機械にも優しいコードです。SEO対策としても非常に重要な要素となっています。

2. 主要なセマンティックタグの種類

HTML5で導入された主要なセマンティックタグには、それぞれ明確な役割があります。header（ヘッダー）はページやセクションの冒頭部分、nav（ナビゲーション）はメニューやリンク集、main（メイン）はページの主要コンテンツ、article（記事）は独立した記事コンテンツ、section（セクション）は関連する内容のまとまり、aside（サイドバー）は補足情報、footer（フッター）はページやセクションの末尾部分を表します。

これらのタグは、Webページを構成する基本的な要素を表現するために設計されています。headerには通常、サイトのロゴやメインの見出し、ナビゲーションメニューなどを配置します。navには、サイト内の主要なページへのリンクメニューを記述します。mainには、そのページの中心となる内容を配置し、1ページに1つだけ使用します。articleは、ブログ記事やニュース記事など、それ単体で意味が通じる独立したコンテンツに使います。sectionは、articleの中をさらに細かく分けるときや、関連するコンテンツをグループ化するときに使います。asideは、本文とは直接関係ない補足情報や広告、関連記事リストなどに使用します。footerには、著作権情報や連絡先、補足的なリンクなどを配置します。

主要なセマンティックタグ一覧：

header：ヘッダー部分（サイトタイトル、ロゴなど）
nav：ナビゲーションメニュー
main：メインコンテンツ（1ページに1つ）
article：独立した記事コンテンツ
section：関連するコンテンツのまとまり
aside：補足情報やサイドバー
footer：フッター部分（著作権、連絡先など）

3. headerタグとnavタグの使い方

headerタグは、Webページやセクションの冒頭部分を表すセマンティックタグです。通常、サイトのロゴ、サイト名、メインメニュー、検索ボックスなどを配置します。headerタグは、ページ全体のヘッダーとしてだけでなく、articleやsectionの中でも使用できます。つまり、1つのページに複数のheaderタグを使うことも可能です。

navタグは、ナビゲーションメニューを表すタグで、サイト内の主要なページへのリンク集を配置します。navタグは、重要なナビゲーションにのみ使用し、すべてのリンクリストに使う必要はありません。例えば、フッターにある補足的なリンクリストは、navタグを使わずにただのリストとして記述することもあります。navタグを使うことで、検索エンジンやスクリーンリーダーが「ここがサイトの主要なメニューだ」と認識し、ユーザーが素早くナビゲーションにアクセスできるようになります。視覚障害のある方が音声読み上げソフトを使う際、navタグがあればメニューにジャンプしやすくなり、アクセシビリティが向上します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>料理レシピサイト</title>
</head>
<body>
    <header>
        <h1>美味しい料理レシピ集</h1>
        <nav>
            <ul>
                <li><a href="#japanese">和食</a></li>
                <li><a href="#western">洋食</a></li>
                <li><a href="#chinese">中華</a></li>
                <li><a href="#dessert">デザート</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <h2>今日のおすすめレシピ</h2>
        <p>季節の食材を使った美味しいレシピをご紹介します。</p>
    </main>
</body>
</html>

ブラウザ表示

この例では、headerタグの中にサイト名とナビゲーションメニューを配置しています。navタグを使うことで、「ここがメニューです」という意味が明確になります。

4. mainタグとarticleタグの違い

mainタグとarticleタグは、どちらもコンテンツを表すタグですが、使い方が異なります。mainタグは、そのページの主要なコンテンツ全体を囲むタグで、1ページに1回だけ使用します。ヘッダーやフッター、サイドバーなどを除いた、本当にメインとなる部分に使います。一方、articleタグは、独立した記事コンテンツを表し、1ページに複数使用できます。

articleタグの判断基準は、「そのコンテンツを単体で取り出しても意味が通じるか」です。例えば、ブログの記事、ニュース記事、商品レビュー、ユーザーの投稿コメントなどは、それぞれが独立した内容なのでarticleタグで囲みます。逆に、記事の一部分だけを取り出しても意味が通じない場合は、sectionタグを使います。mainタグは「このページで一番大事な部分はここですよ」と示すもので、articleタグは「この部分は独立した記事ですよ」と示すものです。ニュースサイトのトップページなら、main要素の中に複数のarticle要素（各ニュース記事の概要）が並ぶという構造になります。ブログの個別記事ページなら、main要素の中にarticle要素が1つあるという構造が一般的です。


<body>
    <header>
        <h1>ニュースサイト</h1>
        <nav>
            <ul>
                <li><a href="#politics">政治</a></li>
                <li><a href="#sports">スポーツ</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <h2>最新ニュース</h2>
        
        <article>
            <h3>経済ニュース：株価が上昇</h3>
            <p>本日の株式市場では、主要な指標が上昇しました。</p>
            <time datetime="2024-01-15">2024年1月15日</time>
        </article>
        
        <article>
            <h3>スポーツニュース：チームが優勝</h3>
            <p>地元チームが見事に優勝を果たしました。</p>
            <time datetime="2024-01-15">2024年1月15日</time>
        </article>
    </main>
    
    <footer>
        <p>Copyright 2024 ニュースサイト</p>
    </footer>
</body>

ブラウザ表示

この例では、main要素の中に2つのarticle要素があります。それぞれのarticleは独立したニュース記事を表しており、単体でも意味が通じる内容になっています。

5. sectionタグの正しい使い方

sectionタグは、関連する内容をグループ化するためのタグです。一般的には、見出し（h2、h3など）を伴って使用します。sectionタグは「章」や「節」のようなイメージで、テーマごとにコンテンツを区切るときに使います。本でいえば、「第1章」「第2章」のような区切りがsectionに相当します。

sectionタグを使うべきかどうかの判断基準は、「そのグループに適切な見出しを付けられるか」です。見出しが付けられない場合は、単なるグループ化目的なので、divタグを使った方が適切かもしれません。例えば、記事の中で「材料」「作り方」「ポイント」というように内容を分けるなら、それぞれをsectionタグで囲み、h2やh3タグで見出しを付けます。また、articleタグの中でsectionタグを使って、記事をさらに細かく区切ることもよくあります。逆に、単にスタイリングのためだけにコンテンツをグループ化したい場合は、意味を持たないdivタグを使うべきです。セマンティックタグは、意味がある場合にのみ使用し、無理に使う必要はありません。

注意：sectionタグには必ず見出しタグ（h1～h6）を含めるようにしましょう。見出しのないsectionは、意味的に不完全とされています。

6. asideタグとfooterタグの活用

asideタグは、メインコンテンツとは直接関係のない補足情報を表すタグです。サイドバーに表示する広告、関連記事のリンク、著者プロフィール、補足説明などに使用します。「aside」は英語で「脇に置く」という意味で、メイン内容の脇に置かれる情報というイメージです。asideタグの内容を削除しても、メインコンテンツの意味は変わらないという特徴があります。

footerタグは、ページやセクションの末尾部分を表すタグで、著作権情報、連絡先、関連リンク、会社情報などを配置します。footerタグは、ページ全体のフッターとしてだけでなく、articleやsectionの中でも使用できます。例えば、ブログ記事の最後に著者情報や投稿日時を表示する部分は、article内のfooterタグで囲むことができます。headerタグと同様に、1ページに複数のfooterタグを使用することも可能です。重要なのは、それぞれのfooterが、どの範囲（ページ全体、article、sectionなど）のフッターなのかを明確にすることです。SEOの観点からも、これらのタグを適切に使うことで、検索エンジンがページの構造を正確に理解でき、評価が向上します。


<body>
    <header>
        <h1>旅行ブログ</h1>
    </header>
    
    <main>
        <article>
            <header>
                <h2>京都旅行記</h2>
                <time datetime="2024-01-10">2024年1月10日</time>
            </header>
            
            <section>
                <h3>清水寺を訪問</h3>
                <p>美しい景色を楽しみました。</p>
            </section>
            
            <section>
                <h3>美味しい和食</h3>
                <p>京料理を堪能しました。</p>
            </section>
            
            <footer>
                <p>投稿者：山田太郎</p>
            </footer>
        </article>
        
        <aside>
            <h3>関連記事</h3>
            <ul>
                <li><a href="#">大阪旅行記</a></li>
                <li><a href="#">奈良旅行記</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>Copyright 2024 旅行ブログ</p>
    </footer>
</body>

ブラウザ表示

この例では、article内にもfooterタグを使って著者情報を配置し、aside要素で関連記事を表示しています。それぞれのタグが適切な役割を果たしています。

7. セマンティックHTMLとSEOの関係

セマンティックHTMLを使うことは、SEO（検索エンジン最適化）において非常に重要です。Googleなどの検索エンジンは、Webページの構造を理解するためにHTMLのタグを読み取っています。セマンティックタグを使うことで、検索エンジンは「どこが重要なコンテンツか」「どこがナビゲーションか」「どこが補足情報か」を正確に判断できます。

例えば、記事の本文をarticleタグで囲むことで、検索エンジンは「ここがこのページの主要なコンテンツだ」と理解します。逆に、すべてをdivタグで作ってしまうと、どこが重要でどこがそうでないのかが判断できず、適切な評価を得られません。また、navタグを使うことで、検索エンジンはサイトの構造を理解しやすくなり、サイト内の他のページも効率的にクロール（巡回）できます。headerやfooterなどのタグを使えば、検索エンジンは「ここは補助的な情報だ」と判断し、本文により重点を置いて評価してくれます。さらに、セマンティックHTMLは、リッチスニペット（検索結果での拡張表示）の表示にも有利に働きます。適切な構造化マークアップと組み合わせることで、検索結果でより目立つ表示が可能になります。

セマンティックHTMLのSEO効果：

検索エンジンがページ構造を正確に理解できる
重要なコンテンツを適切に評価してもらえる
サイト内のページ構造が明確になる
クローラーの巡回効率が向上する
リッチスニペットの表示に有利

8. アクセシビリティの向上

セマンティックHTMLは、アクセシビリティ（誰でも使いやすいWebサイト）の向上にも大きく貢献します。アクセシビリティとは、障害のある方や高齢者など、すべての人がWebサイトを利用できるようにすることです。視覚障害のある方は、スクリーンリーダーという音声読み上げソフトを使ってWebページを閲覧しますが、セマンティックタグがあれば、ソフトウェアが構造を理解して、適切に読み上げてくれます。

例えば、navタグがあれば「ここからナビゲーションメニューです」と案内でき、ユーザーは必要に応じてメニューにジャンプしたり、スキップしたりできます。mainタグがあれば、「ここからメインコンテンツです」と案内でき、ヘッダーやサイドバーを読み飛ばして、すぐに本文にアクセスできます。articleタグやsectionタグがあれば、コンテンツの区切りが明確になり、長い文章でも構造を理解しながら読み進めることができます。また、キーボードだけで操作する方にとっても、セマンティックな構造は重要です。適切なタグを使うことで、タブキーでの移動が論理的な順序になり、操作しやすくなります。アクセシビリティの向上は、すべてのユーザーにとって使いやすいサイトになることを意味し、結果的にユーザー満足度の向上やSEO効果の向上にもつながります。

9. divタグとの使い分け

セマンティックタグの重要性を理解しても、「じゃあdivタグは使わないの？」と疑問に思うかもしれません。答えは「いいえ、divタグも必要です」です。divタグは、意味を持たない汎用的なコンテナとして、今でも重要な役割を果たしています。使い分けの基本は、「意味がある場合はセマンティックタグを使い、単なるグループ化やスタイリング目的の場合はdivタグを使う」ということです。

例えば、レイアウトを整えるためだけにコンテンツをグループ化したい場合、それは意味的なまとまりではないので、divタグを使います。CSSでフレックスボックスやグリッドレイアウトを適用するためのラッパー要素なども、divタグが適切です。また、特定のスタイルを適用するためだけに要素を囲みたい場合も、divタグを使います。重要なのは、「このグループに意味的な役割があるか」を考えることです。ナビゲーションメニューならnavタグ、記事内容ならarticleタグ、単なるレイアウト用のコンテナならdivタグ、というように使い分けます。無理にセマンティックタグを使う必要はなく、適材適所で使い分けることが、良いHTMLを書くコツです。コードの可読性とメンテナンス性を考えながら、最適なタグを選択しましょう。

使い分けのポイント：意味的な役割がある→セマンティックタグ、単なるグループ化→divタグ、と覚えておきましょう。

10. 実践的なセマンティックHTMLの構造例

ここまで学んだセマンティックタグを組み合わせて、実際のWebページの構造を作ってみましょう。ブログサイトを例に、すべてのタグを適切に配置した完全な構造を見ていきます。この構造は、SEOにも優れ、アクセシビリティにも配慮された、モダンなWebページの基本形となります。実際にサイトを作る際は、このような構造をベースにして、内容を追加していくと良いでしょう。

セマンティックHTMLを使った構造は、一見すると複雑に見えるかもしれませんが、それぞれのタグが明確な役割を持っているため、後から見返したときにも理解しやすくなります。他の開発者と協力してWebサイトを作る場合も、セマンティックな構造になっていれば、コードの意図が伝わりやすく、スムーズに作業を進められます。また、将来的にサイトをリニューアルする際も、構造が明確であれば改修がしやすくなります。最初は慣れないかもしれませんが、セマンティックHTMLを意識して書く習慣を付けることで、質の高いWebページを作れるようになります。検索エンジンからの評価も高まり、アクセス数の増加が期待できます。今日からぜひ、セマンティックHTMLを実践してみてください。