HTML5の要素タグの使い分け

header要素

ページのヘッダー部分を表すタグです。
※セクショニング要素ではありません。

footer要素

ページのフッタ部分を表すタグです。
※セクショニング要素ではありません。

nav要素

メニュー、目次、索引等のサイト内全ページに一貫して表示されるグローバルナビゲーションなどに利用されます。

aside要素

サイドバー、広告、新着記事、人気記事等の補足情報を表します。

main要素の定義

ページ内の主要部分に使用します。
1ページ内に1つのみ使用可能で、article/aside/footer/header/nav要素の中には入れてはいけません。

article要素の定義

そのページから切り取っても独立した記事として成立するセクションに使用します。
※例えば料理レシピのサイトで、材料や準備するものだけでは１つの記事として成立しないので、このタグは不適切です。
主に、ページのメインコンテンツ部分に使用します。

section要素の定義

ページ内で文章のまとまりを表すタグです。子要素に見出し（h1〜h6）を持つのが基本です。
また、レイアウト目的では使用ません。
※レイアウト目的なら

を使用します。

セクショニング要素とは

最後に、セクショニング要素について触れておきます。
section/article/aside/navがセクショニング要素に該当します。
HTML5から導入されたHTML要素で文章のまとまった範囲(セクション)を囲い、検索エンジンが文書の構造を理解するのを助ける要素のことです。
HTML5以前であればこういった箇所にはdivタグを用いることが一般的でしたが、現在は文書構造に適したセクショニング要素を使用することで、よりSEOに強いウェブサイトを作ることが可能になっています。