【今更聞けない】sectionとdivの違い・使い分けを解説
こんにちは。NNCの中里です。
夏の暑さが突然落ち着き、あっという間に秋らしい気候になりましたね。
ようやく快適になったので重い腰を上げ記事を書かせてもらいます。
今日は【今更聞けないsectionとdivの違い】というテーマになります。
テーマとしても今更感が強いですが、初学者の方が悩むポイントの一つですので分かりやすく説明ができたらと思います。
section要素とは
そもそもHTMLにおいてsection要素とはどのようなものなのか、簡単に説明すると以下のようになります。
・範囲を作るために使用
・section要素以外に適切な要素がない場合使用
・見出しを置いた方が望ましい
・文書内で章や節や項を作ることができる
div要素とは
続いてdiv要素はどのようなものか、こちらも簡単な言葉にすると以下のようになります。
・汎用的な範囲を作るために使用
・意味を持たない要素
・スタイルを指定する場合idやclassを使用
divとsectionの違いについて
二つの特徴を比較すると範囲を作るという点は共通していますが、divは汎用的に使用できるのに対して、sectionは使い方や目的が限定されていますね。
特にsectionの「section要素以外に適切なものがなければ使用」「見出しを置く」「章や節や項を作る」という点を見ると、sectionは「特定のテーマを持った独立した区間（セクション）を範囲指定するための要素」と考えることができます。
もっと単純に言えば「テーマを範囲指定する要素」になりますね。
文書中にいくつかのテーマがある場合に、それぞれのテーマをsectionで範囲指定すると良いでしょう。
上の図では3つのテーマをそれぞれsectionで囲んでいます。
スタイルやレイアウトのためだけではなく、各範囲をそれぞれテーマとして独立させる目的で指定しています。
それに対してdivは特別なテーマや意味などを持たず、「スタイルのために範囲（グループ）を作る」という使い方になりますね。
「特に意味はないけどデザインやレイアウトを再現するためにこういう範囲が必要」という時にはdivを使うと良いです。
上の図では左側の2つのsectionをdivで一つのグループにまとめ、また右側のsectionないでイメージとテキストをdivでグループにまとめています。
こちらはスタイルやレイアウトのために範囲を作っています。
まとめ
sectionもdivも範囲指定を行うタグのため、最初のうちに使い分けで悩むポイントになるかもしれません。
まずは「テーマを持った範囲」なのか「スタイルのためだけに作る範囲」なのかで判断すると分かりやすいでしょう。（テーマを持った範囲がsection、スタイルのためだけに作る範囲がdiv）
適切に範囲指定をすることで「ここはこういう領域です」と検索エンジンに伝えることができ、SEO強化にも繋がります。
しっかりと使い分けていきましょう！
divタグのみについて解説している記事もありますので、そちらが気になるという方は下の記事をご覧ください！
