Web制作の現場で、ページの構造をすべて div で組んでしまっていませんか。
たしかに div を使えば、見た目のレイアウトは問題なく再現できます。
しかし、ブラウザの向こう側にいる 検索エンジン や 支援技術（スクリーンリーダーなど） にとって、それは「中身の分からない無地の箱」が並んでいるのと同じ状態です。
一歩上のコーディングを目指すなら、section タグを正しく使い分け、HTMLを「文書」として構造化する視点を身につけましょう。
1. section は「本の章」である
section タグは、ページ内における
「意味的な区切り（テーマのまとまり）」を表します。
もっとも分かりやすい判断基準は、次の問いです。
その塊に「見出し」を付けて、目次に載せたいか？
この問いに Yes と答えられるなら、そこは section を使う候補になります。
<section>
<h2>サービスの特徴</h2>
<p>当社のサービスは、スピードと品質を両立させています。</p>
</section>
このように、見出し（h2〜h6）と、それに紐づく内容がセットになっている部分こそが、section の本来の役割です。
2. なぜ div ではなく section なのか？
――2つの技術的理由
「見た目が変わらないなら、div でいいのでは？」
そう感じるかもしれません。
しかし、section を使うことには、見た目以上に明確な技術的メリットがあります。
① マシンリーダブル（機械可読性）の向上
Googleなどの検索エンジンは、HTMLのタグ構造を手がかりに
「どこからどこまでが、何について書かれているか」を理解しています。
section で区切ることで、
「ここからここまでは、ひとつのトピックである」
という意味を明示でき、文書構造（ドキュメント・アウトライン）が明確になります。
これは、検索エンジンにとって理解しやすいHTMLを書くことにつながります。
② アクセシビリティの向上
スクリーンリーダーなどの支援技術には、
「ランドマーク」と呼ばれるナビゲーション機能があります。
section に適切な見出しを伴わせることで、利用者は
- 次の章へ移動する
- 見出し単位で内容を把握する
といった操作が可能になり、情報への到達性が大きく向上します。
3. article・div との決定的な違い
混同しやすいタグとの違いを、ここで整理しておきましょう。
article：それ単体で「独立」できるか？
article は、その部分だけを切り出しても意味が完結するコンテンツに使います。
向いているもの
- ブログ記事
- ニュース記事
- 投稿カード、レビュー
向かないもの
- トップページ内の「会社概要」や「サービス紹介」
（ページ全体の文脈に依存しているため）
div：意味を持たない「純粋な箱」
div は、セマンティック（意味的）な役割を一切持たないタグです。
主な用途
- レイアウト調整
- 背景や装飾のためのラッパー
- JavaScript用のフック
実務でのコツ
「意味を表す section の中に、レイアウト用の div を入れる」構造は、現場ではごく一般的です。
<section class="services">
<div class="inner">
<h2>サービス一覧</h2>
<p>...</p>
</div>
</section>
4. 迷ったときのチェックリスト
タグ選びに迷ったら、次の質問を自分に投げかけてみてください。
① その塊に、適切な「見出し」を付けられるか？
- Yes →
sectionまたはarticle - No →
div
② その塊を、単体で別ページに切り出しても意味が通じるか？
- Yes →
article - No →
section
③ 単に横並びにしたい、余白を作りたいだけの箱か？
- Yes →
div
おわりに
HTMLを書くことは、単にデザインを再現する作業ではありません。
タグ一つひとつに「意味」を与えることで、コードは
「機械に理解されやすく、誰にでも届く情報」
へと変わっていきます。
「とりあえず div」を卒業し、
そのブロックが何を意味しているのかを考えるところから、次の一歩を踏み出してみてください。
