HTMLのdivタグとsectionタグについて

こんにちは！今回もHTMLのタグについて記事にしたいと思います。今回のテーマは「divタグ」と「sectionタグ」のについてです。私もWebデザイナーになってから理解したので、記事にしたいと思います。

① divタグとsectionタグの違い

早速、1つずつ説明したいと思います。

divタグは内容をひとまとめにするタグ

divタグは単体では意味を持たないです。ですが、内容をひとまとめにしたり、CSSでサイトのレイアウトとデザインを整えるときや、まとめたい内容に適切なタグがない場合、最終手段として使用します。フローコンテンツというカテゴリーに属しています。

sectionタグは「アウトライン構造」をひとまとめにするタグ

sectionタグは見出しとそれに関する内容がある範囲を囲むタグです。文書構造を区切るときに使用します。セクショニングコンテンツというカテゴリーに属しています。

2つのタグの違いは「使う場所」です。

フローコンテンツやセクショニングコンテンツが分からない人は、以前私が記事にしたものがあるので参考にどうぞ。

② divタグとsectionタグの使い方

2つの違いが知れたので、次にタグの使い方です。正しく使えるとあなたのWebサイトの構造がどんなものかパソコンやクローラーに理解してもらえます。1つずつ説明します。

divタグの使い方

使い方としては「各内容（コンテンツ）を1つにまとめる」ことです。コンテンツを囲みます（グループ化）。グループ化する事で、 各コンテンツの区分化ができます。

コードだとこのようになります。

<div>
	<p>テキスト</p>
	<img src="画像のパス" alt="">
</div>


<div>
	<ul>
		<li>リスト</li>
		<li>リスト</li>
		<li>リスト</li>
	</ul>
</div>

sectionタグの使い方

sectionタグの使い方は、「見出しと見出しの内容を1つにまとめる」ことです。sectionタグの中に見出しがない状態で使用するのは適切な使い方ではありません。なので、「見出しと見出しの内容のセット」で使います。

コードだとこのようになります。

<h1>メインの見出し</h1>

<section>

	<h2>見出し</h2>
	<p>見出しの内容</p>

</section>

<section>

	<h2>見出し</h2>
	<p>見出しの内容</p>

</section>

③ まとめ

 今回divタグとsectionタグについて記事にしましたが、まとめてみると…

・divタグは単体では意味を持たないが各コンテンツをグループ化したり、サイトのレイアウトやデザイン調整したいときに使用する。

・divタグは、ほかに適切なタグがない場合に最終手段として使用する。

・sectionタグは「見出しと見出しの内容のセット」になっているところをグループ化するタグである。

・sectionタグに見出しが入っていない状態で使用するのは適切ではない。

・divタグとsectionタグの違いは「使う場所」である。

こんな感じだと思います。

この記事を見ていただきありがとうございました！

参考にしたサイト

【HTML】３分でわかる—divタグの意味と使い方

はアウトラインを明示するタグ