HTML5より以前は、ヘッダーもフッターも各ブロックも、何でもdivで囲み、
classやidを付けることでそれぞれのdivを区別していました。
HTML5からは、それぞれの役割にふさわしい要素が追加され、
より明確な文書構造をブラウザに伝えることができるようになりました。

どのような要素が追加されたか、早速見ていきましょう。

header

ページやセクションのヘッダー部分であることを明示するタグです。

ページ全体のヘッダーとして使う他に、
sectionやarticleなどのセクションの中で使うこともできます。

 

・ページ全体のヘッダーとして使う場合の例

 

・セクションの中で使う場合の例

nav

グローバルナビゲーションなど、主要なナビゲーションのセクションを表します。

footer

ページやセクションのフッター部分であることを明示するタグです。

ページ全体のフッターとして使う他に、
sectionやarticleなどのセクションの中で使うこともできます。

 

・ページ全体のフッターとして使う場合の例

・セクションの中で使う場合の例

main

ページの主要コンテンツであることを明示するタグです。
各ページ内で1回のみ使用します。
ページ固有のコンテンツのみを含み、全ページ共通のヘッダー、フッター、ナビゲーションなどは含めません。

article

それ自体が独立したコンテンツとして成り立つブロックを表します。

新着記事やブログ記事、記事に対するコメント等、その部分だけ完結しているブロックです。

入れ子にして使用することも可能です。

aside

メインコンテンツとは関連性が薄い補足や広告などを表します。

section

汎用的なセクションを定義し、章・節・項などのひとまとまりのセクションであることを表します。
これまで紹介した、aside、article、navなどのセクションを表す要素のどれにも当てはまらない箇所に使用します。

section内には見出しタグを含めることが推奨されています。