目次
セマンティック（semantic）とは？
セマンティック（semantic） とは
「意味のある」「意味づけされた」 という意味を持つ言葉です。
Web制作の文脈では、
HTMLのタグを“意味に合わせて” 正しく使うこと
を指します。
たとえば：
<header>→ ページ・セクションの先頭部分<nav>→ ナビゲーションメニュー<article>→ 独立した1つの記事<footer>→ ページまたは記事の締め
など、タグの意味（＝セマンティクス）に沿って使うこと が大切です。
なぜセマンティックが重要なの？
理由は大きく3つあります。
① Google がページ構造を正しく理解しやすくなる（SEO）
セマンティックに書かれたHTMLは、
検索エンジンにとって “読みやすく、意味が伝わりやすい” 構造になります。
結果：
- 検索評価が上がる
- 上位表示されやすくなる
- 内容の解析（見出し・記事単位）が正確になる
② アクセシビリティ（読み上げ対応）が良くなる
視覚障害者向けスクリーンリーダーは、
セマンティックタグを認識して読み上げ順序や内容を把握します。
例：
<nav>→ 「ナビゲーション」<main>→ 「メインコンテンツ」<article>→ 「記事」
意味のあるHTMLは、全てのユーザーに優しい。
③ コードが読みやすく、保守しやすい
非セマンティックな div だらけのコードより、
意味のあるタグを使った方が圧倒的に読みやすい。
例：
<div class="header"> <!-- 何の要素か分からない -->よりも、
<header>の方が直感的。
セマンティックなHTMLタグの一覧
代表的なものをまとめました。
| タグ | 意味 | 使う場面 |
|---|---|---|
<header> |
ページ・記事の先頭 | ロゴ・タイトル |
<nav> |
ナビゲーション | メニューリンク |
<main> |
主内容 | ページの核となる部分 |
<section> |
意味的まとまり | 「サービス紹介」など |
<article> |
独立したコンテンツ | ブログ記事・お知らせ |
<aside> |
補足情報 | サイドバー |
<footer> |
ページの締め | コピーライト・連絡先 |
<figure> |
画像＋説明 | 図・写真・キャプション |
セマンティックでないタグ
div
意味なし。レイアウト用。
span
意味なし。インラインでの装飾用。
これらを “意味づけの代わりに使う” のは NG。
「意味を持たせないときに使う」のが div と span の正しい役割。
セマンティックと非セマンティックの比較
よくない例（divだらけ）
<div class="header">
<div class="menu">…</div>
</div>
<div class="content">
<div class="article">…</div>
</div>よい例（意味のあるHTML）
<header>
<nav>…</nav>
</header>
<main>
<article>…</article>
</main>見ただけで “構造が分かる” のがセマンティックHTMLの特徴。
SEOにおけるセマンティックの効果
Googleはページを読む時、
- タイトル（title）
- 見出し（h1〜h6）
- セマンティック構造（header / main / article / section）
- テキスト内容
を総合して意味を解析しています。
つまり：
セマンティックなHTML
→ 解析しやすく → 内容理解が正確 → SEOが強くなる
非セマンティックなHTML
→ 何を意味するか分からない → 検索評価に不利
セマンティックにすることで得られる実務効果
- CSSが当てやすくなる
- JavaScriptで操作する要素が分かりやすい
- コードレビューが通りやすくなる
- 保守しやすい
- デザイン修正が楽になる
特に大規模サイトではセマンティックが必須。
「セマンティックにしたHTML」実例
<header>
<h1>BrightCare Kids 公式サイト</h1>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/service/">サービス</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>最新のお知らせ</h2>
<p>本日は施設イベントを開催しました。</p>
</article>
<section>
<h2>サービス紹介</h2>
<p>個別支援・グループ活動などを行っています。</p>
</section>
</main>
<footer>
<p>© 2025 BrightCare Kids</p>
</footer>まとめ
- セマンティック＝意味のあるHTMLを書くこと
- Google・ユーザー・制作側すべてにメリットがある
- 適切なタグを選ぶとSEOとアクセシビリティが向上
divとspanは「意味がない時」にだけ使う- サイトの質を底上げする重要な技術
初心者はまず、
header / nav / main / section / article / footer
から使い始めるのがおすすめです。