HTML5セマンティクス講座｜初心者向けに意味と使い方をわかりやすく解説

HTML5から導入された「セマンティックタグ」。
これは、Webページの構造や意味を明確にするための重要な要素です。

この記事では、初心者でも理解できるように、セマンティクスの基本から応用まで解説します。

セマンティクスとは何か

セマンティクス（Semantics）とは「意味」のことです。

従来のHTMLでは、divタグだらけになり、
ページ内の意味構造が分かりにくくなる問題がありました。

そこでHTML5では、意味を持ったタグが追加され、
機械や検索エンジンにもわかりやすく構造を示せるようになりました。

HTML5とは？わかりやすく解説

なぜセマンティックタグが重要なのか

理由は大きく4つあります。

1. SEOに有利

検索エンジンは見出しや役割を理解し、評価に利用します。

2. 構造が分かりやすい

人間にも、どこが記事本文か、ナビゲーションか判断しやすくなります。

3. アクセシビリティ向上

音声読み上げデバイス等に有効で、ユーザー体験が上がります。

4. コードの可読性が向上

管理のしやすさ、修正のしやすさにつながります。

HTML5で追加された主なセマンティックタグ一覧

タグ	役割
header	ヘッダー領域
nav	ナビゲーションリンク
section	章・セクション
article	独立した記事コンテンツ
aside	サイド情報や補足
main	ページの主要部分
footer	フッター領域
figure	図や画像のまとまり
figcaption	figureの説明文

よく使うセマンティックタグ解説

header

ページやセクションのヘッダ部分に使用します。

<header>
  <h1>サイト名</h1>
</header>

nav

ナビゲーションリンク群に使用します。

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about/">当サイトについて</a></li>
  </ul>
</nav>

main

ページ内で最もメインとなる内容を囲みます。1ページ1つが推奨。

<main>
  <h2>記事タイトル</h2>
  <p>本文がここに入ります。</p>
</main>

section

意味のまとまりごとに使用します。見出しとセットが望ましいです。

<section>
  <h2>特徴</h2>
  <p>説明文が入ります。</p>
</section>

article

独立して成立する記事ブロックです。

<article>
  <h2>おすすめ商品レビュー</h2>
  <p>本文が入ります。</p>
</article>

aside

補足情報やサイドバーなどに使用します。

<aside>
  <p>プロフィールボックスなどを配置します。</p>
</aside>

footer

<footer>
  <p>コピーライト表記やリンクを記載します。</p>
</footer>

セマンティックタグ使用例

以下は、セマンティクスを取り入れたページ構造の例です。

<!DOCTYPE html>
<html>
<head>
  <title>サンプルページ</title>
</head>
<body>

<header>
  <h1>サイトタイトル</h1>
</header>

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

<main>
  <article>
    <h2>記事タイトル</h2>
    <p>記事本文が入ります。</p>
  </article>
</main>

<aside>
  <p>関連情報のボックスなど</p>
</aside>

<footer>
  <p>© 2025 example.com</p>
</footer>

</body>
</html>

セマンティクスを使う際の注意点

過剰に使いすぎない
sectionは見出しとセットで使う
mainは1回が基本
本文にdiv連打をしない

セマンティクス導入により改善されるポイント

検索エンジンが理解しやすくなる
スクリーンリーダー対応強化
コードの保守性向上
意味構造が明確化

特にWordPressサイトで有利になります。

HTMLセマンティクスとSEOの関係

Googleは以下を理解します。

どこがコンテンツか（main）
何が補足か（aside）
どこがナビゲーションか（nav）
独立内容はどれか（article）

これによりページ評価が向上しやすくなります。

初心者によくある間違い

divとsectionの違いが曖昧
見出しなしsectionの乱用
mainの複数使用
navを通常リンクにしてしまう

ひとつずつ改善しましょう。

まとめ

学習ポイント	状態
セマンティクスは「意味づけ」	✅
SEOやアクセシビリティに有効	✅
sectionとarticleの違い	✅
mainは1ページ1個	✅
div乱用は避ける	✅