HTML5の勉強

会社で、研修生とアシスタントさん向けのHTML5のお話をしたときの参考資料。

HTML5についてのおさらい
http://w3g.jp/blog/studies/html5report
続HTML5についてのおさらい
http://w3g.jp/blog/studies/html5report2
HTML4から変化したHTML5のマークアップ ここが違う!サンプルで見るHTML5(2)
http://codezine.jp/article/detail/5600

セクショニングの考え方をメインにやったので、自分のためのメモとして・・・

HTML5で導入された、セクショニングコンテンツと呼ばれるタグがあり、section,article,nav,asideがそれに該当します。そしてそのセクションの階層構造をアウトラインと呼びます。

アウトラインに着目すると、本や雑誌の目次のようなものになるわけで。

まぁ、要はh1~h6のタグがどの範囲についての見出しで有るのかを明確にしようではないか。ってことだと思います。また、h1~h6の見出しタグは、暗黙のセクションを導入します。でも、それに依存することなく、階層構造は明確にすること。

そして、セクションは基本的には「見出し+コンテンツ」が無いとNG。ただ、nav,asideについては見出しがなければ、Navigationなり、SideBarなりの見出しをUA側で設定してくれるので、無理に見出しをつける必要は無い。

articleは単体で独立しているコンテンツ(ブログの1つの記事とか。)に対してつけられるセクション。

sectionは汎用的に使えるセクション。長いarticleのなかにサブセクションが存在する場合などとかに。

asideはこのコンテンツがなくなってもページが成り立つというコンテンツに。サイドバーとか、バナーエリアとか。その他補足なんかも該当します。

navはナビゲーション。そのサイトにおける主要なナビゲーションを示します。なので、フッターリンクなどは通常navを使う必要性はない。

とか、すごいあっさりな内容でしたが。結構改めて勉強してみると間違いも結構あったり。。。。

とりあえずHTML5でこのブログは制作していますよ。。。