Webサイトを作成する際にhtmlの記述を適切に行うことは、サイトの構造を明確にしユーザビリティやSEOを向上させるために重要です。ただ<div>／<section>／<article>といった要素はブラウザで見たときの表示に大きな違いはなく、ページの内容を整理できますが要素の具体的な使い方や違いについてはときおり悩むことがあります。。これらの要素の使い方と違いを理解し、それぞれの要素が持つ意味や適用例について考えてみます。

<div>（Division）について

目的

<div>はhtmlでは汎用的なコンテナ要素として使われることが多いです。特定の意味や目的を持たず、レイアウトやスタイルのために使われます。

使い方

レイアウト上で扱われる大きな枠として記述され、CSSやJavaScriptと組み合わせて使用されます。

使用例

<div class="c-content">
	<h1>タイトルがはいります。</h1>
</div>
<div class="c-content">
	<p>汎用的なコンテンツなどがはいります。</p>
</div>

<section>（セクション）について

目的

html内のセクションを示します。一般的には、内容が一つのテーマに関連している場合に使用されます。

使い方

見出し（<h1>〜<h6>）と一緒に使用されることが多いです。セクションは独立している事があまりなく、まとまりのあるコンテンツをグループ化するために使われます。

使用例

<section class="c-section">
	<h2>セクションのタイトルがはいります。</h2>
	<p>セクションのコンテンツがはいります。</p>
</section>
<section class="c-section">
	<h2>セクションのタイトルがはいります。</h2>
	<div class="c-section__box">
		<h3>セクションのサブタイトルがはいります。</h3>
		<p>セクションのコンテンツがはいります。</p>
	</div>
	<div class="c-section__box">
		<h3>セクションのサブタイトルがはいります。</h3>
		<p>セクションのコンテンツがはいります。</p>
	</div>
</section>

<article>（記事）について

目的

独立して意味を持つコンテンツを示します。ブログ記事、ニュース記事など、単独でも意味が通じる内容に使用されます。

使い方

見出しと一緒に使用され、しばしば他のメタ情報（著者、発行日など）と組み合わせて使用されます。

使用例

<article class="c-article">
	<h2>記事タイトル</h2>
	<p class="c-article__author">記事著者</p>
	<p class="c-article__cont">記事コンテンツ</p>
</article>
<article class="c-article">
	<h2>記事タイトル</h2>
	<p class="c-article__author">記事著者</p>
	<p class="c-article__cont">記事コンテンツ</p>
</article>

まとめ

基本的にには上記を踏まえてサイトの内容によって適切に記述することを心がけておけば良いと考えています。また、SEOやアクセシビリティにおいても影響がありそうで、

• <div>: 特に意味を持たないため、SEOやスクリーンリーダーへの影響は少ない。
• <section>／<article>: セマンティックな意味を持つため、SEOやアクセシビリティにおいて重要。

と認識しておけば良いと思います。