CONTACT US

Blogブログ

ブログのイメージ

article と section

Coding2019.09.16 : Naoki Yamamoto

コーディングをしていると<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>見出し1</h1>
	<p>リード文リード文リード文リード文リード文リード文リード文</p>
	<section>
		<h2>見出し2</h2>
		<img src="" alt="画像">
		<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
	</section>
	<section>
		<h2>見出し2</h2>
		<img src="" alt="画像">
		<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
	</section>
	<section>
		<h2>見出し2</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になるのではと思います。

お仕事のご依頼やご相談は下記より
お気軽にお問い合わせください

Tel.089-961-4166(平日 9:00〜18:00/土日祝休業)

お問い合わせフォームはこちら