『HTML5』から新たに導入された『article』と『section』タグ。あなたは、その違いを理解していますか?はなこホームページを作成するとき『article』と『section』を使うように決まったんだけど、そもそもどんな感じに使えばいいのかな?僕も、この間きちんと使うようにって言われたんだけど、使い方がよくわからないんだ。はなこ『article』と『section』の違いについて、まずは理解する必要があるわね。今回は、『article』と『section』の違いについて解説し、意味や使い方をチェックします。スポンサーリンク【HTML5】『article』と『section』の意味まずは、『article』と『section』が誕生した経緯について解説します。書籍や論文などを見ると、文章は章・節・項などで範囲が区切られていますよね。『HTML5』より前の規定では、そのような概念がありませんでした。そのため、通常は<h1><h2><h3>といった見出しタグを使って、章・節・項といった階層を表していました。文章の階層構造を表すタグとして新たに導入されたものです。『article』とは?それ自体で自己完結している箇所を表すタグになります。ブログでの一つの記事は、それ自体で完結していることが多いので、『article』タグで囲むことができます。<h1>マイ・ブログ</h1><p>これはブログです。</p><article>_<h2>記事1</h2>_<p>_一つ目の記事です。_</p></article><article>_<h2>記事2</h2>_<p>_二つ目の記事です。_</p></article>とした場合、記事1と記事2は独立しているので『article』タグで囲むことができます。次のような構造になりますね。マイ・ブログこれはブログです。記事1一つ目の記事です。記事2二つ目の記事です。『section』とは?指定した範囲が章・節・項などであることを表すタグになります。このタグで囲まれた範囲は、章・節・項であることを示すようになります。<h1>タイトル</h1><p>これは前置きです。</p><section>_<h2>第1章</h2>_<p>_一つ目の章です。_</p></section><section>_<h2>第2章</h2>_<p>_二つ目の章です。_</p></section>というような例の場合、『section』タグによって2つの章に分けられることになります。次のような構造になりますね。タイトルこれは前置きです。