はじめになぜセマンティクスが重要なのか？
HTML5では多くのセマンティック（意味的）要素が導入されましたが、現在でも<div>や<span>の多用で済ませてしまうケースが少なくありません。
セマンティックHTMLが重要な理由
- 検索エンジン（SEO）にとって意味がわかりやすくなる
- スクリーンリーダーなどの支援技術にとって情報構造が明確になる
- 保守・チーム開発において可読性が上がる
- 構造化データに発展しやすく、Webの意味論的価値が高まる
はじめになぜセマンティクスが重要なのか？
以下はHTML5で導入されたセマンティック要素の代表例です
| 要素 | 用途の説明 |
|---|---|
| <header> | 各セクションの冒頭に置くヘッダー |
| <nav> | ナビゲーションリンク群を表す |
| <main> | ページの主要コンテンツ |
| <section> | 意味のあるセクション、見出しとセットで使う |
| <article> | 独立した内容（例：ブログ記事、ニュース） |
| <aside> | 補足情報や広告、サイドバーなど |
| <footer> | フッター（コピーライトや関連リンク） |
| <figure>+<figcaption> | 図やキャプション付きの画像 |
意外と知られていない使い分けのコツ
sectionとdivの違いって？
- sectionは意味のあるまとまりを示すときに使う。
- 単なるレイアウト目的ならdivを使う。
OKの例
<section>
<h2>サービス紹介</h2>
<p>当社のサービスは...</p>
</section>
NGの例（意味のないsection）
<section>
<div>・・・</div>
</section>
articleとsectionの違いは？
- articleはそれ単体で成立するコンテンツ
- sectionはページ全体の一部として意味のある構成
<article>
<h2>お知らせ</h2>
<p>夏季休業のお知らせ...</p>
</article>
mainは1ページに1つだけ！
- ページ内の主役コンテンツを表す要素
- headerやfooter、navは含まない
<body>
<header>...</header>
<nav>...</nav>
<main>
<h1>サービス紹介</h1>
<p>...</p>
</main>
<footer>...</footer>
</body>
よくあるセマンティック設計のミスと対策
| ミス例 | 修正ポイント |
|---|---|
| <section>に見出しがない | sectionは<h2>などとセットで意味を持つ |
| <article>を全ページに使ってしまう | ブログや独立コンテンツに限定する |
| <main>が複数ある | HTML5仕様では1ページに1つのみ許可 |
| 装飾やJS処理のためだけにセマンティック要素を乱用 | 意味に基づいて選定すること |
セマンティックHTMLの実践メリット
-
SEO評価の向上
意味のある構造がGoogleのクローラーに伝わりやすい。
-
アクセシビリティ対応
スクリーンリーダーがページの構造を理解しやすくなる。
-
メンテナンス性の向上
コードが論理的に整理され、第三者にもわかりやすい。
まとめ
HTMLはただ表示するためではなく、「伝える」ための言語です。
セマンティックな要素を意識的に選ぶことで、より信頼性のある・拡張性のあるWeb制作が可能になります。
「divの乱用」から卒業して、意味のあるHTMLを。
