html5のarticle要素とsection要素の違い

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要素の中には見出しを持つべきだということのようです。

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


個人プロジェクトでプロジェクト管理ツールを運営しています。気になる方は30日間無料で利用できるので、ぜひお試しください!

プロジェクト管理のすべてを、一つの場所で - Seamless
https://seamless.jp/

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください