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は、これまでのマークアップで考えると、h2見出しとその内容を囲うタグ、sectionはh2以下の構造化データを囲うタグとするとわかりやすいでしょうか。
また、HTML5ではh1タグがいくつも使用できるので、さらにわかりずらくなります。検索エンジンなどを考慮すると、やはりh1タグを多用する有効性は見つけづらいため、現時点ではXML1.0でのhタグ構造を採用したほうがよいでしょう。
sectionタグはhタグ要素の内容を囲うタグで、囲んだhタグ要素の上部のタグには必ずhタグ要素が必要になります。
なので、一番最初のh1タグにはsectionはいりません。また、navやarticleタグ内の一番最初の見出しタグもsectionタグは必要ないわけです。あくまで、各ブロック要素内での構造を意識して、2番目からのhタグ要素をsectionタグで囲んでいきます。
h要素が入れ子になっている場合は、sectionタグもそれぞれのh要素を入れ子に囲っていきます。
例)
[h1]
[nav]
[h2]
[/nave]
[article]
[h2]
[section]
[h3]
[section]
[h4]
[/section]
[/section]
[/article]
[footer]
アウトラインを理解するには、HTML 5 Outlinerサイトやプラグインを利用するとわかりやすいでしょう。
またプログラミングなどで利用されるノード構造について理解し、タグの構造をノードとして考えておくとわかりやすいかもしれません。
とはいえ、HTML5を策定した団体でも、「あくまでこのような構造で情報が構成されるであろう」という前提でこれらのタグを採用しており、すべてのWebコンテンツがこのような構造であることはなく、またその必要もありません。
策定側でも予想しないような使われ方をすることがあるので、まずはこのぐらいの内容をある程度大まかに理解したうえでマークアップしていくことがよいと考えています。
Copyright WEB制作システム.