第8章：意味のある構造を作る - セマンティックHTML
これまでの章で、私たちは <h1> や <strong> といったタグを使い、文章の断片に「見出し」「重要」といった意味を与えてきました。
この最終章では、その考え方をページ全体に広げます。いわば、HTML学習の「総仕上げ」です。ページのレイアウトに「意味」を持たせる「セマンティックHTML」をマスターし、あなたのブログを真にプロフェッショナルな構造に進化させましょう。
セマンティックHTMLとは？ 「賢い箱」で役割分担
昔のHTMLでは、ページのヘッダー、サイドバー、フッターといった各部分を、特に意味を持たない汎用的な箱である <div> タグで作っていました。
これは、中身が何か分からない、ただの段ボール箱をたくさん並べているようなものです。class="header" のような手書きのラベルを貼れば人間には分かりますが、ロボット（検索エンジンなど）には、どの箱が本当に重要なのか直感的には分かりません。
一方、セマンティックHTMLは、役割があらかじめ印刷された「賢い箱」を使います。
- ヘッダーを入れるための、
<header>（ヘッダー用）と書かれた箱 - 記事本文を入れるための、
<article>（記事用）と書かれた箱 - フッターを入れるための、
<footer>（フッター用）と書かれた箱
このように、コンテンツの「意味」や「役割」に合った専用のタグを使う。それがセマンティックHTMLの基本的な考え方です。
ブログの各パーツに「役割」を与えよう
あなたのブログも、これらの「賢い箱」を使えば、その構造を非常に明確に表現できます。
<header>(看板): サイトの「顔」となる部分。ロゴやサイトタイトルを入れます。<nav>(案内標識): グローバルメニューなど、サイト内の主要なページへの案内リンクをまとめます。<main>(本編): そのページで一番伝えたい、メインとなるコンテンツ全体を囲みます。1ページに1つだけ使います。<article>(記事): ブログの記事一つ一つがこれに該当します。それ単体でも意味が通じる、独立したコンテンツの塊です。<section>(章・節):<article>の中で、さらに「はじめに」「結論」のようにテーマごとに内容をグループ分けする時に使います。<aside>(補足): 本編とは少し関連が薄い補足情報。プロフィールや関連記事リスト、広告などを入れます。<footer>(奥付): サイトの末尾に置く情報。コピーライト表記やプライバシーポリシーへのリンクなどを入れます。
なぜ「賢い箱」を使うべきなのか？3つの絶大なメリット
「<div>でも見た目は同じにできるのに、なぜ面倒な使い分けを？」と思うかもしれません。その理由は、目に見えない部分で、あなたのブログに絶大なメリットをもたらすからです。
1. アクセシビリティが向上する ♿
目の不自由な方が使うスクリーンリーダー（音声読み上げソフト）は、この「賢い箱」の名前を認識します。そのため、「メインコンテンツにジャンプする」といった操作が可能になり、誰にとっても情報が格段に利用しやすくなります。
2. SEO効果が期待できる 📈
Googleの検索ロボットも、この箱の名前を読んでページの構造を理解します。「ここが <main>（本編）で、ここが <article>（記事）だな」と正確に認識することで、記事の重要な部分を適切に評価し、検索順位に良い影響を与える可能性があります。
3. 未来の自分が楽になる 👨💻
<div> が並んだコードは、後から見返すと「この箱、何を入れるためだっけ…？」と分からなくなります。役割の分かるタグで書かれたコードは、一目瞭然でメンテナンスが非常に楽になります。これは、未来の自分や他の開発者への最高のプレゼントです。
セマンティックHTMLを使うことは、あなたのコンテンツをより多くの人に届け、長期的に価値を保つための賢い「投資」なのです。
