2020/07/07 (更新日: 2020/08/20)

【HTML】divタグとsectionタグの違い・使い分けまとめ【全てdivだとNGです】

HTML/CSS

こんにちは、
TOMO（@Tomo___san_2525）です。

プログラミングを独学しており、現在はWebページのコーディング案件で稼いでいます。

加えてSEOについても学んでいまして、正しいhtml記述によってクローラーからの評価を上げられるエンジニアを目指しています。

この記事で到達できるゴール

• divとsectionの違いが分かる
• 全てにdivタグを使用するのはNGであることが分かる
• divとsectionの使い分けができるようになる

僕自身もあやふやになっていた部分でして、この記事にてまとめます。

divタグとsectionタグの違い【明確に使い分けるべき】

下記のとおりです。

• divタグ = CSSでクラス指定するために使う
• sectionタグ = Webページの構造を示すために使う

上記です。
詳細はこのあと解説しますが、、、。

divとsectionでは、「目的」が完全に異なることは覚えておくべきですね。

divタグ = CSSで「見た目」をいじりたいときに使う

例えば、下記のような感じですね。

1. <div class=”yellow-text”>この文章は、cssで黄色に設定します</div>

上記です。

divタグは、cssにてデザインを定義する際に「class」や「id」を指定するため「だけ」に使います。

divタグは「意味」を持たない【ただ単に「区画」するだけ】

下記です。

HTML の コンテンツ分割要素 (<div>) は、フローコンテンツの汎用コンテナーです。 CSS を用いてスタイル付けがされるまでは、コンテンツやレイアウトには影響を与えません。

MDNより一部抜粋

つまり、cssで指定しデザインをいじらない限り、「意味」を持たないということ。

「汎用コンテナー」と呼ばれるdivタグには、「ただ、その範囲を区画して名前を付けるだけ」の効果しかないと覚えておけばOKです。

sectionタグ = 1つの「項目」だと示すために使う

いっぽうsectionタグは、下記です。

HTML の <section> 要素は、 HTML 文書の中で単独のセクション (区間) を表します。

MDNより一部抜粋

上記のとおりでして、そのWebページの「構造」を分かりやすくするために使います。

例えば、下記ですね。

1. <section class=”main-wrap”>
2.  <h2>ようこそ、〇〇農園のサイトへ！</h2>
3.  <p>〇〇農園では、りんごやぶどうなどを栽培し、オンライン販売しています。</p>
4. </section>

 

上記です。
「〇〇農園」のWebページ内で、「自社について紹介する区間」を示しています。

sectionタグは「意味」を持つ

divタグと違い、sectionタグにはそれだけで「意味」があります。

cssで指定しなくても、「自己紹介の区画」「商品紹介の区画」「お問い合わせフォームの区画」などという「構造」を意味付けすることができます。

もう一度まとめると、

• ページ内で、コンテンツの内容が変わるとき = sectionタグ
• 単に、cssでいじるためにclass指定をしたいとき = divタグ

上記でOKです。

よくある質問：『全部divじゃダメなんですか？』

結論、NGです。
根拠は、下記のとおり。

<section> 要素を単なる汎用コンテナーとして使用しないでください。このような場合、特にスタイル付けのみの目的で区切るのは <div> の役割です。大まかに言えば、 section は文書のアウトラインに論理的に現れるものに使用してください。

MDNより一部抜粋

上記です。

繰り返しですが、divタグは「見た目をいじるためだけに使うもの」です。

悪い例【全てdiv = セクションが1つもないページ】

1. <div class=”jikosyoukai”>
2.  <h2 class=”top-title”>自己紹介</h2>
3.  <div class=”name-and-text”>
4.    <div class=”name”>
5.     <p>TOMO</p>
6.    </div>
7.    <div class=”text”>
8.      <p>こんにちは、TOMOです。僕は現在会社員をしながらフリーのFPとしても活動しています。プログラミングやSEOについても独学中です。</p>
9.   </div>
10.  </div>
11. </div>

 

改善した例【sectionを正しく使う】

1. <section class=”jikosyoukai”>
2.  <h2 class=”top-title”>自己紹介</h2>
3.  <div class=”name-and-text”>
4.    <div class=”name”>
5.     <p>TOMO</p>
6.    </div>
7.    <div class=”text”>
8.      <p>こんにちは、TOMOです。僕は現在会社員をしながらフリーのFPとしても活動しています。プログラミングやSEOについても独学中です。</p>
9.   </div>
10.  </div>
11. </section>

 

ページ内にて「自己紹介」をするのは1ヶ所だけですよね。
ならば、sectionにて意味を持たせるべきです。

sectionを使うもう1つのメリット

「見出しタグ」のリセットです。

例えば、下記のとおり。

1. <section class=”main-wrap”>
2.  <h1>自己紹介</h1>
3.  <p>こんにちは、・・・</p>
4. <h2>このページについて</h2>
5. <p>このページでは、・・・</p>
6. </section>
8. <section class=”second-wrap”>
9.  <h1>商品紹介</h1>
10.  <p>販売している商品を、まとめて紹介しています。</p>
11.  <h2>?りんご</h2>
12.  <ul>
13.  <li>シナノスイート</li>
14.  <li>津軽</li>
15.  <li>シナノゴールド</li>
16.  </ul>
17. </section>

上記です。

sectionごとにh1タグから使用できるので、管理が簡単になるというメリットがあります。

divとsectionの違いを正しく知る方法【2つある】

下記のとおり。

• ドットインストール（有料バージョン）
• iSara模写

上記です。

ドットインストールでは、有料アカウントになると使える「詳解HTML 基礎文法編」という動画内にて分かりやすく解説してくれます。

iSara模写をする場合、GoogleデベロッパーツールでHTML構造を見ると、適所にsectionタグが使用されているのが分かるはずです。

Progateでは全てdivタグです

divタグは便利だけど、「最終手段」と考えるべき

下記です。

<div> 要素は、他に適切な意味的要素がない場合に限り使用してください。

MDNより一部抜粋

上記のとおり。

あくまでも、「見た目のために、最終手段として使う」と覚えておけばOKです。

よくある質問：『divとsectionは、それぞれ「入れ子」にしてもいいの？』

結論、どちらも「入れ子」にすることが可能です。

例を示すと下記のとおり。

divタグの中にsectionタグ

1. <div class=”main-wrap”>
2.  <section class=”name-and-text”>
3.   <h1>自己紹介</h1>
4.   <p>こんにちは、TOMOです。</p>
5.   <p>僕は現在、・・・</p>
6.  </section>
7. </div>

 

sectionタグの中にdivタグ

1. <section class=”name-and-text”>
2.  <div class=”name”>
3.    <h1>自己紹介</h1>
4.    <p>こんにちは、TOMOです。・・・</p>
5.  </div>
6.  <div class=”text”>
7.    <p>僕は現在、・・・</p>
8.  </div>
9. </section>

 

上記のとおりです。

なお、前者は「自己紹介」の部分全てを一括でcss指定したいとき（背景色をいじりたいなど）に使用できます。

いっぽう後者の場合、「h1」と「p」のそれぞれの文字色やフォントサイズなどをいじるときに適しています。

詳細は、「»MDN Web docs」のページをご確認ください。

それでは、今回は以上です。

プログラミング独学におすすめの書籍【この記事の執筆にも使用しました】

Programming

• facebook
• Tweet
• hatebu
• Share
• Read Later