article と section

ホームページ制作のコーディングをしていると<artcle> と <section>タグの使い所に悩んでしまうかもしれません。
今回は<artcle> と <section>の使い所について、述べたいと思います。

article

<article>の使い所は以下だと考えています。

• 記事自体
• 記事内で独立して配信などが可能な部分
• トップページなどの記事一覧の個々の記事

参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/article

section

<section>の使い所は以下だと考えています。

• 見出し(hタグ）を含むテキストや画像のまとまった部分

参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/section

と、このような感じです。

記事ページのコーディングは以下の感じになります。

<article>
	<h1>見出し１</h1>
	<p>リード文リード文リード文リード文リード文リード文リード文</p>
	<section>
		<h2>見出し２</h2>
		<img src="" alt="画像">
		<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
	</section>
	<section>
		<h2>見出し２</h2>
		<img src="" alt="画像">
		<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
	</section>
	<section>
		<h2>見出し２</h2>
		<img src="" alt="画像">
		<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
	</section>
</article>

ホームページのトップページなどの新着情報などは以下の感じになります。

<section>
	<h2>新着情報</h2>
	<article>
		<a href="">
			<h3>記事の見出し1</h3>
			<img src="" alt="サムネイル1">
		</a>
	</article>
	<article>
		<a href="">
			<h3>記事の見出し2</h3>
			<img src="" alt="サムネイル2">
		</a>
	</article>
	<article>
		<a href="">
			<h3>記事の見出し3</h3>
			<img src="" alt="サムネイル3">
		</a>
	</article>
</section>

上記の例は文章構造だけなので、レイアウトするときは、<div>を使うことで、いい感じのhtmlになるのではと思います。