そろそろhtml5を使ってサイトをひとつ作ってみるかなー、ということでポイントのメモを残しておきます。
html5ではh1要素が複数使える?
これ、どうやらhtml5の仕様的には問題がないようです。
が、検索エンジンがh1要素の複数使用に対してペナルティを与えるかどうかについては微妙みたいです。良いも悪いもいえないといったところ？
これまでh1要素を複数文章中で使うのはSEO的に問題アリとされてきましたが、このhtml5の仕様をうけて検索エンジン側の認識も改まる可能性は十分にありそうです。
そんなこんなんで、h1要素を複数使用するのは現状では勇気がいりますね（笑）。
headerタグなどはページにひとつだけ、ではない！
これまで私が得たhtml5の情報でheaderやfooterタグがあるのは知っていたのですが、これらのタグはページに対して「1回のみの使用」だと思っていたんです。
つまり、サイト的にヘッダーな部分とフッターな部分に使用するのが適切なタグなんだな〜、と。
ところがこれらのタグはページの中で複数回使用しても問題ないというか、むしろそれが正しいみたいです。
<header>
<h1>サイト名</h1>
</header>
<main>
<article>
<header>
<h1>ゲーム</h1>
</header>
<p>ここに内容が入りますここに内容が入りますここに内容が入ります</p>
<footer>
<p>投稿日:2015.01.01</p>
</footer>
</article>
<article>
<header>
<h1>映画</h1>
</header>
<p>ここに内容が入りますここに内容が入りますここに内容が入ります</p>
<footer>
<p>投稿日:2015.01.01</p>
</footer>
</article>
</main>
<footer>
コピーライトなど
</footer>
こんな感じで使えるということですね。
学習のために色んなサイトのソースをのぞいていたら、
<header id="header">
<h1>サイト名</h1>
</header>
こんな書き方が多かったのはこういう事情からだったんですね。
つまり従来はdivのidにheaderとしていたところをそのままheaderタグに置き換えただけなのだと（苦笑）。
できればheaderタグのidにsiteなどとしたほうが適切だと思います。
mainタグはarticleタグの中では使えない！
前のサンプルコードを参考にしていただきたいのですが、mainタグというのはarticleタグやsectionタグのように「セクショニング」を示すタグではありません。
mainタグはそのページのメインとなるコンテンツを示すもので、かならずページの中で一度しか使えません。
従来だとdivにidでcontentsやmainとマークアップしていたところに使うという理解ですね。
前記のコードでいうところの「ここに内容が入ります」のところに使用できるのかと思っていたのですがダメみたいです。
articleタグとsectionタグの違い
これが本当にわかりづらくて色々調べるハメになったのですが、どうやらarticleタグは「それ単体でもwebページとして成立するコンテンツ」、つまりブログの記事などがそれにあたり、sectionタグは「機能や意味をひとまとめにするもの」という理解で良さそうです。
<article>
<h1>ゲーム</h1>
<section>
<h1>Final Fantasy</h1>
<p>説明文説明文説明文説明文説明文説明文説明文説明文</p>
</section>
<section>
<h1>Dragon Quest</h1>
<p>説明文説明文説明文説明文説明文説明文説明文説明文</p>
</section>
<section>
<h1>Monster Hunter</h1>
<p>説明文説明文説明文説明文説明文説明文説明文説明文</p>
</section>
</article>
<article>
<h1>映画</h1>
<section>
<h1>アルマゲドン</h1>
<p>説明文説明文説明文説明文説明文説明文説明文説明文</p>
</section>
<section>
<h1>タイタニック</h1>
<p>説明文説明文説明文説明文説明文説明文説明文説明文</p>
</section>
<section>
<h1>パイレーツオブカリビアン</h1>
<p>説明文説明文説明文説明文説明文説明文説明文説明文</p>
</section>
</article>
こんな感じで使用するのが適当なようです。
余談ですが、やっぱりh1要素が複数あるのはやはり違和感ありまくりです（笑）。
使わなくても良い？asideタグ
このタグが一番ハッキリしません。
仕様書的には「メインコンテンツと関連度の低い要素」ということらしいです。
私が調査したところ、このタグは「マークアップされる場所に応じて意味が変わる」というのが一番しっくりきました。
どうやらサイドバーや記事下の付帯情報的なところ、広告などに使うという理解で良さそうなのですが、サイドバーはnavで書けるわけですし・・・。
現状ではあえて使わずにdivで対応することでも問題ない気がしますね。
なぜhtml5で書かなければならないのか
そもそもなぜhtml5で書く必要があるのか、それは文章の構造をハッキリさせるためなんですね。
従来でいえばxml（RSS）がまさにこれにあたるものだったわけでxhtmlというものが生み出されたわけですがタグの乱使用は避けられず、html5として仕切りなおすことで意識的にhtmlタグを使って構造的に文章を書くことを浸透させようということなのだと思います。
ルールに則って構造化されたhtmlドキュメントは書いた本人だけでなく他の人や機械的にも理解しやすく汎用性が高くなるので何かと使い勝手が良いわけです。
なのでhtml5を使って書いても、それらタグの意味を間違って使用してしまえば何の意味もありません。
ところがエディタなどがそれらの使い方を指摘してくれることはありませんし、cssをあててデザインを作ればどんなタグの乱用であっても表向きには綺麗なサイトというのも作れてしまいます。
何か確認しながらで良い方法はないものか・・・というと、あるんですね、これが。
Google chromeアドオン HTML5 Outliner
このアドオンを使うと閲覧中のページのアウトライン（構造のことです。どうやらhtml5では構造といわずにアウトラインというのが主流なようです。）を示してくれます。
このツールを使って最低限の内包関係の正誤ぐらいは確認しながらマークアップすると良いのかな、と思います。
IE8以前のブラウザはhtml5の対応にJavascriptなどを使用する必要がありますが、大半の方のブラウザはhtml5がデフォルトで使えるようになってきました。
調べてみたところ、これまでxhtmlなどで経験のある方であれば主要どころはこの記事であげたタグぐらいですので簡単に移行できるので、そろそろ重い腰をあげてみてはいかがでしょうか。