HTML5コーディングでまず注意したいこと

CSS3ではベンダープレフィックスもそれほど気にしなくてもよい程になってきており、
HTML5でのマークアップも今後はわりあい普及していくのではないでしょうか。

とはいえ、別のDTDがいつどのように採用されたり、拡張されたりするのかわかりませんし、
あまり難しい顔していちいち振り回されていくのも愚かしいとも考えられます。

なので、最低限必要なHTML5のマークアップ術をマスターし、SEO的に有効性が高い記述で、
文法的にさほど問題ないぐらいの柔軟な対応が望ましいでしょう。


HTML5はHTML4やXML1.0に比べ、よりセマンティックWeb(構造化データ)化しており、明示的に構造をいみする予約語的セレクタがいくつも存在します。
タグは基本的にはどんな名前でもつけられます。これまでCSS記述およびブラウザはそのタグをブロック要素、インライン要素、解釈しない要素の3種類にわけて認識していました。
HTML5ではさらに拡張されており、headerタグやfooterタグ、navタグやarticle、sectionタグなどの構造を明示的に意味するタグが実装されています。

これらの予約語的なタグは、マークアップ用に記述されるためのタグではなく、明確に構造ブロックを意味するためのタグとなっています。


だから基本的にはHTMLソース上のブロックを意味したり、段落構造をコンピュータが理解しやすくするメリットが大きくなる記述なわけです。
具体的には検索エンジンにとって友好的な記述方法になります。


さて、本題であるHTML5マークアップで、まずは気をつけることですが、header、nav、footer、article、sectionの5つです。

headerはh1記述などを含む、ページの見出しとなるようなブロックで、navはメインのサイトナビゲーション、footerはページの著作権表記やサイト管理者情報などのいわゆるフッター部分です。

これらの記述についても、実は厳密にこうあるべきだということはないので、一般的なサイト構造であれば、ブロックごとに見合ったタグで囲うぐらいの認識で大丈夫です。

次にarticleとsectionですがこちらはややわかりずく、HTMLのアウトラインを理解していないと使いずらいかもしれません。
もっとも、現時点でこれらのタグがあってもなくても特に問題はないし、不整合の記述であるために大きなデメリットがあるわけではないので、あまり神経質に考えると、時間ばかりかかって有効性の低い状態を招きますので、気楽に考えるのがよいかもしれません。

とはいえ、sectionタグはHTML5の構造化を理解する上でも、ページのアウトライン化を図るうえでもわりあい大切なので、ある程度きちんと理解しておいたほうがよいかもしれません。

articleは、これまでのマークアップで考えると.......