3分で簡単にわかる！HTMLのdivとsectionの違いとは？使い分けやコーディングのポイントもITオタクの会社員ライターがわかりやすく解説

ライター／ちょび

ビジネス書が大好きな読書家Webライター。FPの資格やAWSの資格を取得し、金融知識やITについての情報を発信している。

divとsectionの違いとは？

image by iStockphoto

divとsectionはHTMLでよく使用される要素ですが、どちらもコンテンツをグループ化するために使用されます。しかし、divとsectionにはそれぞれ特徴的な違いがあるのでみていきましょう。

5分で分かる！HTMLとCSSの違いとは？定義や役割・読み込み方も現役エンジニアがわかりやすく解説

HTML5とXHTMLの違いとは？HTMLの歴史やXMLとの関係までプログラマーがわかりやすく解説

簡単でわかりやすい！PHPとHTMLの違いとは？静的と動的？仕組みや特徴もプログラマーが詳しく解説

div：コンテンツをグループ化

divは、HTML文書内で区分けするための汎用的なコンテナ要素で、タグ（<div>〇〇</div>）で囲うことで任意の要素をグループ化できます。

例えば、同じデザインのスタイルを適用したい複数の要素をグループ化したり、CSSによるスタイル指定を行うために使用することが一般的です。divタグで囲われた箇所の前後には自動的に改行が入り、id属性やclass属性を用いることでCSSから要素を指定することができます。

簡単でわかりやすい！HTMLのidとclassの違いとは？目的や使い分けをプログラマーがわかりやすく解説

3分でわかる！HTMLのpタグとdivタグの違いとは？使い分けやコード例もAWS資格を持つ会社員ライターがわかりやすく解説！

section：文章を構造化

sectionは、HTML文書内のテキストコンテンツを意味的に関連するグループに分割するために使用します。例えば、ブログ記事の各セクションやニュース記事の本文など、文書の構造を明確にするために使用されることが多いです。

sectionタグもdivタグと同様、囲われた箇所の前後に自動的に改行が入ります。また、sectionタグ内には、headerタグ・footerタグ・h1〜h6タグなど、意味的に関連する要素を入れ子にすることができるので、sectionタグで分割することでコードが読みやすくなるでしょう。

divとsectionの違いを理解するためのポイント

image by iStockphoto

HTML/CSSを扱う上で、divとsectionはよく使われる要素です。どちらも見た目は似ていますが実際には違いがあります。ここではdivとsectionの違いについてみていきましょう。

divとsectionの意味の違い

divは「区分」という意味があり、HTML上で要素を区切ったりグループ化するために使われ、sectionは「部分、節」という意味があり、文章などの特定の意味を持つ要素をグループ化して構造化するために使われます。

つまり、divとsectionはそれぞれに用途が違うので使い分けが必要です。divは様々な要素で区切ることができるので汎用的な場面で利用される一方で、sectionは文章などの特定のコンテンツをまとめるために利用されています。

divとsectionの役割の違い

divはグループ化された要素をまとめ、一つのコンテンツの区切りとして使われることが一般的です。例えば、Webサイトのヘッダーやフッター、サイドバーなどをdivタグで囲んでCSSでスタイルを適用することができます。

sectionは記事やページを複数のセクションに分けることでコンテンツの整理や管理を行うことができるので長いコードを書くときには便利です。また、sectionには見出しをつけることができるため、SEO対策としても重要な役割があります。

divとsectionの見た目の違い

divは要素を単純に区切るためのものですが、特に見た目には違いがありません。sectionの場合はそれぞれのセクションの境界をWebページ上で明確にするため、デフォルトでは上下に余白が設定されています。

divとsectionの使い分け

image by iStockphoto

HTMLにおける要素の中でも特に頻繁に使用されるのがdivとsectionです。どちらも要素のグループ化やレイアウトの調整に使われますが、それぞれの特徴や適切な使い方を理解していないとコードの可読性が低下し、メンテナンスが難しくなる可能性があります。ここではdivとsectionの使い分け方についてみていきましょう。

divの使い方

divは、Webページ内のコンテンツを作るために非常に重要な要素です。divタグを使って画像や文章などの様々なコンテンツをグループ化することができます。例えばWebページ内に複数の画像がある場合、それらの画像を1つのdiv要素で囲むことでグループ化できたり、異なる種類同士のコンテンツでもグループ化が可能です。

divは以下サンプルコードのように使用されます。

<div>
<h2>見出し</h2>
<p>段落の文章。</p>
<img src="画像のURL" alt="画像の説明">
</div>

このサンプルコードでは、div要素で見出し・段落・画像を囲んでいます。このようにdivタグを使うことで様々なコンテンツを一つにまとめることができるでしょう。

sectionの使い方

sectionは、divと非常によく似ていますが、よりWebページの区分けや構造化に特化した要素です。section要素はWebページ内の異なるセクションを表すために使用されます。例えばブログ記事の場合、各セクションは投稿全体・見出し・本文・画像などの要素で構成されていることが一般的です。これらの要素を1つのsection要素で囲むことでWebページを構造化できます。

sectionは以下のサンプルコードのように使用するのが一般的です。

<section>
<h2>見出し</h2>
<p>段落の文章。</p>
<img src="画像のURL" alt="画像の説明">
</section>

このサンプルコードでは、section要素で見出し・段落・画像を囲んでいます。このようにsectionを使うことで、Webページの異なるセクションを表すことができるのでコードの可読性も向上するでしょう。

また、sectionでWebページを構造化するとSEO対策にも役立つので、Googleなどの検索エンジンがWebページのコンテンツをより正確に理解し検索上位を狙えるようにもなります。

divとsectionのHTMLコーディングのポイント

image by iStockphoto

divとsectionはHTMLのコーディングに必須な要素であり、Webページの構造化にはなくてはならないものです。しかし、どちらをどのように使うべきかについては混乱することもあるでしょう。ここでは、HTMLのコーディングでdivとsectionを使うポイントを解説していきます。

divとsectionの適切なネストの方法

divとsectionを用いてコーディングする際、これらの要素を適切にネストすることで、コンテンツの意味を明確にすることができます。

例えば、ヘッダー、メインコンテンツ、フッターの3つのセクションがあるWebページを考えてみましょう。この場合、section要素を使用してそれぞれのセクションを定義し、div要素を使用してそれらをグループ化することができます。以下は、適切なネストの例です。

<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="container">
<section>
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</div>
<footer>
<p>© 2023 Example Co.</p>
</footer>
</body>

この例では、headerとfooterをsectionで囲み、メインコンテンツをグループ化するためにdivを使用しています。

divとsectionのクラス名の付け方

HTMLの要素には、class属性を指定してスタイルを適用することができます。class属性は、複数の要素に同じスタイルを適用する場合に便利です。div要素やsection要素にもclass属性を指定することができます。

例えば、ページ内のセクションごとに背景色を変える場合には、以下のようなclass属性を指定する方法が一般的です。

また、divの要素に対してスタイルを適用する場合は、以下のようにclass属性を指定すると分かりやすくて便利です。

class属性は、要素が表すコンテンツの特徴や役割に基づいて命名することが一般的です。具体的には、要素の用途や意味に合わせて、header・footer・nav・mainなどの名前をつけることで可読性や保守性が向上します。

また、同じ意味を持つ要素には同じclass名をつけることで一括して同じスタイルを適用することができるため、わざわざ一つひとつスタイリングする必要がなくなり、効率的に作業ができるので覚えておきましょう。

divとsectionのスタイルの適用方法

div要素やsection要素にスタイルを適用する方法は、それぞれに充てたclass属性を指定してCSSでスタイリングします。以下のCSSは、div要素やsection要素に適用させるCSSスタイル例です。

/* div要素にスタイルを適用する場合 */
div {
background-color: #F0F0F0;
padding: 10px;
}

/* class属性を指定してスタイルを適用する場合 */
.section-1 {
background-color: #F0F0F0;
padding: 10px;
}

/* section要素にスタイルを適用する場合 */
section {
background-color: #F0F0F0;
padding: 10px;
}

これらのCSSスタイリングでは背景色や余白などを指定しています。CSSを適用する際には、divやsectionに充てた適切なセレクター（id名やclass名など）を指定することが重要です。

divとsectionを使い分けて見やすいページを作ろう

div要素は特定の意味を持たないコンテンツを区切るためのものである一方、section要素はより意味的なコンテンツのセクションを定義するためのものです。これらの要素を適切に使い分けることでページの見やすさを向上させることができます。

これらdiv要素とsection要素にとって重要な目的はページの構造が明確で読みやすくなることです。div要素を適切にグループ化することでCSSのスタイルを簡単に適用でき、section要素を使用することで各コンテンツの意味を明確にしてSEO対策にも貢献することができます。

つまり、適切な要素の使い分けと適切なクラス名やID付与により人の目にも見やすく、SEO的にもに優れたページを作ることで質の高いWebページを作れるでしょう。

この記事の目次

divとsectionの違いとは？

div：コンテンツをグループ化

section：文章を構造化

divとsectionの違いを理解するためのポイント

divとsectionの意味の違い

divとsectionの役割の違い

divとsectionの見た目の違い

divとsectionの使い分け

divの使い方

sectionの使い方

divとsectionのHTMLコーディングのポイント

divとsectionの適切なネストの方法

divとsectionのクラス名の付け方

divとsectionのスタイルの適用方法

divとsectionを使い分けて見やすいページを作ろう

3分で簡単にわかる！HTMLのdivとsectionの違いとは？使い分けやコーディングのポイントもITオタクの会社員ライターがわかりやすく解説

この記事の目次

divとsectionの違いとは？

div：コンテンツをグループ化

section：文章を構造化

divとsectionの違いを理解するためのポイント