【今更聞けない】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タグの違いを見ていきましょう。
以下は、ブログ記事の例です。
各テーマ（章）がsectionタグで区切られており、セクションごとにタイトルが付けられています。
<article>
<section>
<h2>はじめに</h2>
<p>この記事では、最新のウェブデザインのトレンドを紹介します。</p>
</section>
<section>
<h2>トレンド1: ミニマリズム</h2>
<p>シンプルでクリーンなデザインが引き続き人気です。</p>
</section>
<section>
<h2>トレンド2: ダークモード</h2>
<p>多くのサイトやアプリでダークモードが採用されています。</p>
</section>
</article>記事（article）内に明確に異なる複数のテーマが存在するため、それぞれをsectionで囲んでいます。
下のようなコンテンツの場合はdivを使います。
<article>
<div class="article_top">
<h2>STUDIO NNC合同会社について</h2>
<p>STUDIO NNC合同会社はWeb制作とWeb教育を行う会社です。</p>
</div>
<div class="article_bottom">
<p>私たちは以下のようなことを得意としています。</p>
<ul>
<li>デザイン</li>
<li>コーディング</li>
<li>WordPress作成</li>
</ul>
<p>その他にも3Dモデル作成やライティング業務も対応可能です</p>
</div>
</article>記事内に異なる複数のテーマは存在しませんが、article_topとarticle_bottomで背景色を変えたいなどの目的でdivタグを使用しています。
その他のタグとの違い
続いてdivタグ以外で、sectionとの使い分けに悩まれることが多いタグを紹介します。
sectionとariticleの違いについて
articleタグは、独立して再利用可能なコンテンツを表します。
記事やブログの投稿など、コンテンツのみを外部に取り出しても意味が通じるコンテンツに使用します。
一方でsectionは、その文書内の特定のトピックやテーマに関連するコンテンツの区分として使用するタグになります。
sectionとasideの違いについて
asideタグは、メインコンテンツに関連する補足的な情報を提供するために使われます。
サイドバーや関連記事のリンクなどに使用されるのが一般的で、セクションとは役割が異なります。
まとめ
sectionもdivも範囲指定を行うタグのため、最初のうちに使い分けで悩むポイントになるかもしれません。
まずは「テーマを持った範囲」なのか「スタイルのためだけに作る範囲」なのかで判断すると分かりやすいでしょう。（テーマを持った範囲がsection、スタイルのためだけに作る範囲がdiv）
適切に範囲指定をすることで「ここはこういう領域です」と検索エンジンに伝えることができ、SEO強化にも繋がります。
しっかりと使い分けていきましょう！
divタグのみについて解説している記事もありますので、そちらが気になるという方は下の記事をご覧ください！
