【HTML5】section？article？aside？違いと使い分け

sectionとarticle、ややこしいですよね。

asideはこれらと比べるともう少しわかり易いですが、それぞれシンプルに解説していきます。

section…「章・節」などひとつのまとまりを表す汎用的な分け方。例えば導入部、新着情報、連絡先など。

article…「記事」を表す分け方。ひとつの記事として独立した部分に用います。

aside…ページのメイン要素ではない「補足情報」を表す分け方。

全て意味的なひとまとまりを表す分け方で、コンテンツを区切るタグです。

sectionが一番汎用的な分け方で、articleでは記事に特化、asideでは補足情報、他にもnavでは主要ナビゲーション、header/footerではそれぞれヘッダー/フッターというよりその意味を表す分け方が出来ます。

記事でもない、補足でもないナビでもヘッダーフッターでもない部分にsectionを使うとよいでしょう。

sectionは意味的なひとまとまりなので見出しをつけられる部分に用いられます。

必須ではないですが<section>～</section>の間にはまず<h1>から<h6>の見出しを使ってそのセクションの意味を表すのがよいでしょう。

html5ではセクションごとに<h1>を使っていいとされてますが、個人的には<h1>はページ内にひとつにしていた過去の慣習やクライアントの要望から<h2>以下を用いるようにしています。

文書構造的に間違っていなければどちらでも問題ないです。

記事として独立した部分にarticleを用いることが大切です。

記事の一覧を表す全体にarticle、またその中に複数記事のarticleという入れ子でも、記事の一覧をsectionとして中にarticle、またはそれ以外の要素としてのsectionが入っていても問題ないでしょう。

ただ必ずしもarticleやsectionを用いなければならない訳ではないので、よく理解出来ないまま使うのであれば使用せずdivなどで代用した方がよいと思います。

正しいセクショニングをされたhtmlは文書構造がわかり易く、検索エンジンなどの機械的にも読み取りやすいソースコードになります。

SEOに有利かどうか？というと実際には他にもっと優先される事項が多いでしょうし、影響は大きくはないでしょう。

ただ同程度の評価を受けるサイトが並んだ時には文書構造がわかり易いサイトの方が上位に来る可能性があると推測されます。

初学者のみならず歴の長いエンジニアでも迷うsectionやarticle。

SEOなど日々変わっていくものなので絶対にこれ！という正しいマークアップは存在しません。

基礎を学んでる最中ではこういったタグがあるということは頭に入れた上で迷わずどんどんコードを書いていく方がよいと思います。

自分の中でのルールづけをして、出来る限りわかり易くコーディング出来るようになれればよいでしょう。

リンク

ABCウェブエンジニアblog