セマンティクス
HTMLタグに「意味」を持たせて、わかりやすいコードを書く
セマンティック（Semantic）とは？
Semantic = 「意味のある」「意味的な」
❌ 意味がない書き方
<div class="header"> divは「ただの箱」。クラス名で意味を伝えているだけ。
✅ 意味がある書き方
<header> タグ自体が「これはヘッダー」と意味を伝えている。
日常での例え
本を書く時「第1章」「まえがき」「あとがき」と名前を付けますよね？
HTMLでも同じように、「ここがヘッダー」「ここがメインコンテンツ」と 名前を付けて構造を明確にするのがセマンティックHTMLです。
なぜセマンティックHTMLが重要？
♿
アクセシビリティ
スクリーンリーダー（視覚障害者用の読み上げソフト）が ページの構造を理解して、「ナビゲーションへ移動」などの操作ができる。
🔍
SEO
SEO = Search Engine Optimization（検索エンジン最適化）
Googleが「ここがメインコンテンツ」と理解し、検索順位に良い影響を与える。
👨💻
保守性
他の開発者（や未来の自分）がコードを見た時に 「ここがヘッダー、ここがサイドバー」とすぐ分かる。
ページ構造のタグ
よくあるWebページの構造
header（ヘッダー）→ main（メインコンテンツ）→ footer（フッター）
この構造をHTMLタグで表現します。
セマンティックなページ構造
本の構成のように、パーツに名前を付ける
html
<body>
<!-- header: ページ上部（ロゴ、ナビなど） -->
<header>
<h1>サイトタイトル</h1>
<!-- nav: ナビゲーションリンク -->
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">概要</a></li>
</ul>
</nav>
</header>
<!-- main: ページの主要コンテンツ（1ページに1つ） -->
<main>
<!-- article: 独立した記事 -->
<article>
<h2>記事タイトル</h2>
<p>記事の本文...</p>
</article>
<!-- aside: 補足情報（サイドバー） -->
<aside>
<h3>関連リンク</h3>
<ul>...</ul>
</aside>
</main>
<!-- footer: ページ下部（著作権、連絡先など） -->
<footer>
<p>© 2024 My Website</p>
</footer>
</body>プレビュー
よく使うセマンティックタグ
| タグ | 意味 | 使いどころ |
|---|---|---|
| <header> | ヘッダー | ページ上部、ロゴやナビ |
| <nav> | ナビゲーション | メニューリンク |
| <main> | メインコンテンツ | ページの主要部分（1つだけ） |
| <article> | 独立した記事 | ブログ記事、ニュース |
| <section> | セクション | テーマごとのまとまり |
| <aside> | 補足情報 | サイドバー、関連リンク |
| <footer> | フッター | ページ下部、著作権 |
article と section の違い
独立性があるかどうか
html
<!-- article: それ単体で意味が通じる（独立している） -->
<!-- 例: ブログ記事、商品カード、コメント -->
<article>
<h2>新商品のお知らせ</h2>
<p>この記事だけ切り取っても意味が通じる</p>
</article>
<!-- section: ページ内のテーマ分け（依存している） -->
<!-- 例: 「サービス紹介」「料金」「FAQ」の各セクション -->
<section>
<h2>サービス紹介</h2>
<p>このページの一部として存在する</p>
</section>
<section>
<h2>料金プラン</h2>
<p>...</p>
</section>プレビュー
article（独立）
新商品のお知らせ
section
サービス
section
料金
divだらけ vs セマンティック
よくある問題
「div地獄」と呼ばれる状態。すべてdivで書かれていて、 どこが何なのか分からない...
❌ divだらけ
<div class="header">
<div class="nav">...</div>
</div>
<div class="main">
<div class="article">...</div>
<div class="sidebar">...</div>
</div>
<div class="footer">...</div>クラス名を見ないと構造が分からない
✅ セマンティック
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>タグ名だけで構造が分かる！
まとめ
覚えておくこと
- • セマンティック = 意味のある
- • divの代わりに意味のあるタグを使う
- • アクセシビリティとSEOに良い
- • コードが読みやすくなる
基本の構造
- • header → nav
- • main → article / section
- • aside（サイドバー）
- • footer