Webサイトをコーディングする際、なんとなく画面のレイアウトに合わせて <div class="box"> ばかり使ってページを区切っていませんか？
現在のHTML（HTML5以降）では、ページの各パーツの意味に合わせて正しくタグを使い分ける「セマンティック・マークアップ」が求められます。今回は、ページを適切に区切るための主要な要素と、コーディング時の注意点を備忘録としてまとめました。
1. ページ全体を大きく区切る「ランドマーク要素」
サイトの骨組みを作る、最も外側の大きな区切り（コンポーネント）には以下のタグを使用します。これらは1ページの中に大まかに配置される基本の区切りです。
■ <header>（ヘッダー）
ページの一番上、または各セクションの導入部分に使用する区切りです。
- 主な役割: サイトのロゴ、サイト全体のメインナビゲーション（グローバルメニュー）、検索フォーム、キャッチコピーなどを配置します。
- ポイント:
<body>直下だけでなく、<article>や<section>の中に入れて「その記事の見出しや投稿日をまとめるヘッダー」として使うことも可能です。
■ <nav>（ナビゲーション）
サイト内の主要なナビゲーション（メニューリンクの集まり）の区切りに使用します。
- 主な役割: グローバルナビゲーション、フッター内の主要なサイトマップ、パンくずリストなどに使用します。
- ポイント: ページ内のすべてのリンクをこれで囲む必要はありません。あくまで「主要なナビゲーション」にのみ適用します。
■ <main>（メインコンテンツ）
ページの主役となる主要なコンテンツを囲む区切りです。
- ルール: 1ページに1つだけしか配置できません。他のページ（トップページ、お問い合わせページなど）と共通するヘッダーやフッター、サイドバーなどはこの中には含めません。
■ <aside>（サイドバー・補足情報）
メインコンテンツとは直接関係のない、周辺の補足情報やサイドバーの区切りに使用します。
- 主な役割: ブログのサイドバー（プロフィールやカテゴリー一覧）、関連記事一覧、広告枠などに使用します。
■ <footer>（フッター）
ページの下部に位置するフッター部分の区切りです。
- 主な役割: 著作権表記（コーポレート・コピーライト）、サイトマップ、プライバシーポリシーや利用規約へのリンクなどを配置します。
- ポイント:
<header>と同様に、記事（<article>）の末尾に入れて「著者のプロフィールや関連記事」をまとめるフッターとして使うこともできます。
2. メインコンテンツ内をさらに細かく区切るタグ
<main> の中をさらに意味のある単位で区切る場合、<div> ではなく以下のタグを適切に使い分けます。
① <article>（独立したコンテンツの区切り）
それ単体で切り離して、別のサイトやSNSに転載しても意味が通じる「独立した完結したコンテンツ」に使用します。
- 主な用途: ブログの記事、ニュースの1トピック、ユーザーの口コミ投稿など。
② <section>（テーマごとの区切り）
章や節のように、共通のテーマを持つコンテンツの塊を区切る場合に使用します。
- ルール: 原則として、中に見出しタグ（
<h2>〜<h6>）が必ず含まれる必要があります。 - 注意: 単に「デザインやレイアウトの都合で囲みたいだけ」のときには使えません。
③ <hr>（テーマの変わり目・段落レベルの区切り）
現在の仕様では「ストーリーの文脈における、テーマや話題の劇的な変わり目」を表す区切りタグとなっています。
- 注意: 見た目のためではなく、小説の章の切り替わり（空白行の代わり）や、記事内でのトピック転換という意味を持ちます。
３．基本的な2カラム・レイアウトのHTML構造例
一般的なWebサイトに多く見られる、ヘッダー、ナビゲーション、メイン（記事・セクション）、サイドバー（補足情報）、フッターで構成された標準的な2カラム構造をマークアップすると、以下のようなHTMLコードになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページの区切り方サンプル（2カラム）</title>
</head>
<body>
<header>
<h1>サイトのタイトル</h1>
<nav>
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</nav>
</header>
<div class="container">
<main>
<article>
<section>
<h2>セクションタイトル 1</h2>
<p>ここにメイン記事の文章が入ります。</p>
</section>
<section>
<h2>セクションタイトル 2</h2>
<p>ここにメイン記事の文章が入ります。</p>
</section>
</article>
</main>
<aside>
<h2>サイドバー見出し</h2>
<ul>
<li><a href="#">おすすめ記事1</a></li>
<li><a href="#">おすすめ記事2</a></li>
<li><a href="#">カテゴリー一覧</a></li>
</ul>
</aside>
</div>
<footer>
<p>© 2026 備忘録ブログ</p>
</footer>
</body>
</html>
4. なぜ <div> だけで区切ってはいけないのか？
結論から言うと、<div> タグには一切の「意味（セマンティクス）」がないからです。 <div> は単に「CSSでデザインを当てるための枠組み」に過ぎません。
適切なタグで区切ることで、以下のようなメリットがあります。
- SEO効果（検索エンジン最適化）: Googleなどのクローラーがサイトの構造を正確に理解できるようになり、正しく評価されやすくなります。
- アクセシビリティの向上: 視覚障害者が使うスクリーンリーダー（音声読み上げソフト）が、ヘッダーやナビゲーションをスキップして、一足飛びに
<main>の中身へ移動できるようになります。 - コードの可読性向上: 開発者がコードを見た時に、どこからどこまでが一つの塊なのかが一目でわかるようになります。
【まとめ】使い分けの判断フロー
ページを区切る時に迷ったら、以下の基準でタグを選びましょう。
Q. その区切り（塊）は、それ自体で独立したコンテンツとして完結している？
┣ ［はい］ ➡ <article>
┗ ［いいえ］
↓
Q. その塊には、適切な「見出し（hタグ）」をつけられるテーマがある？
┣ ［はい］ ➡ <section>
┗ ［いいえ］
↓
単にレイアウトの都合や、CSS（Flexbox等）を当てるための枠が欲しいだけ？
┗ ［はい］ ➡ <div> を使う正しい区切り方をマスターして、ブラウザにも検索エンジンにも優しい「美しいHTML構造」を意識していきましょう！
コメント