blog.kotamiyake.me

為せば成る、為さねば成らぬ何事も

articleタグとsectionタグの違いがよく理解できていなかったので、自分で調べて学んだことをまとめてみました。

HTML5では文書のアウトラインを明確にすることが重要になります。なので闇雲にこれらのタグを使用するのではなく、文章の構造を意識してマークアップすることが大切です。

そこで新たに追加された要素がarticlesectionです。もちろんこの他にもいくつかのタグが追加されています。そちらの意味についてはまたの機会に。

W3Cの文書には以下のように書かれています。

article

article要素は、文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結した構造を表す。

http://momdo.github.io/html5/sections.html#the-article-element

section

section要素は、文書またはアプリケーションの一般的セクションを表す。

http://momdo.github.io/html5/sections.html#the-section-element

つまり、articleはブログの一つの記事を、sectionは一つの記事の中の章や節のまとまりを表現するときに使用します。

またsectionの項では、

各sectionの主題は、section要素の子として見出し(h1-h6要素)を含むことによって一般に識別されるべきである。

と書かれており、section要素の中には見出しを持つべきだということのようです。

以下の記事がわかりやすいかと思いますので、適宜参照してください。