ウェブ制作をしていると、div というタグを多用してしまいます。
これは非常に便利なタグでして色々な用途で利用できます。

例えば弊社制作のヤマハパルス様のトップページを覗いてみましょう。

わぁ、わかりづらぁい！

まだ開始タグは class や id で任意の名前を付けられるので良いのですが、終了タグにはそれがないので、どこからどこまでがそのタグの範囲かというのがとてもわかりづらいです。

仕方がないので実際には適当にコメントを挿入して対応しています。

わかるようにはなりましたが、ごちゃごちゃしてしまいますよね。

なんかバランがいっぱいあるように見えますし。

ところが！

最新の HTML5 では新たに使えるタグがババーンと増えております。
いままで仕方なく divタグを多用していたのを、きちんと用途毎に使い分けできるようになります。

例えば下記のようなタグで使い分けが可能です。

main, article, aside, nav, header, footer, figure, section …

ところが、タグは増えたけれど、使い分けの仕方がよくわからない！、ということがままあります。

そんなときに参考にしたいサイトはこちらです。

html5 Doctor ( http://html5doctor.com/ )

こちらはHTML5について著名な方々が、どのように記述（マークアップ）すればいいのかということを丁寧に解説してくれます。英語で。

ボクは英語はよくわかんないので、日本語で書かれたこっちを見てます。

HTML5.jp ( http://www.html5.jp/ )

こちらは前述の html5 Doctor の翻訳記事を掲載していたりと、日本人にたいへんやさしい作りになっております。タグ別の解説一覧はこの辺から参照できます。

やりがちで誤ったマークアップの例

さて、よくやる誤ったマークアップ例を紹介してみましょう。

「section要素は div要素と同じように使える！」という思い込みによるマークアップです。実はこれはやってはいけない書き方になります。

section要素とは、セクション、つまり文章の「節」に当たるわけですから、必ずその見出し（h1～h6）も必要になります。

なので、必ずその節でのタイトルを入れてください。修正例はこちら。

もしも付けられる見出しがないようでしたら、それはsection要素を使うべき箇所ではありません。div要素など、他の要素を検討しましょう。（参考ページ）

※ 誤った例でも表示は問題なくされますので、作り直すほどのことでもないのですが。

あと、こちらもわかりやすくまとまっています。

[HTML5] 新要素まとめ【2014/2/14版勧告候補】 – Qiita

新しい要素をうまく使い分ければ、冒頭のようにコメントに頼らなくてもそれなりにわかりやすく記述ができますので、しっかり使い分けましょう。