HTML5で組んでみた

2009-06-18 13:55:00
HTML5 イメージ

タイトル通り、HTML5 の勉強、ってことでこのブログのトップを HTML5 でテスト的に組んでみた

組んだ感想。すげーやりやすい。

section など、div よりも より意味のあるタグが追加されたことで、視覚的にも分かりやすいし、section section {}のように入れ子を表現しても div のように変になりづらいというのも利点。

HTML5 で組んでみたのサンプル

そして全然関係ないけど、今回の HTML5 で組むことで、なんだかかなり色々なことに気づけたw(コーディングのノウハウ的なので)

IE で HTML5 を使う際の注意点

IE は正式に HTML5 には対応していないので、そのまま使用すると、CSS が反映されない。(section { display: block; }などとしても無視される)

なので IE 向けに HTML5 を使うにはちょっとした工夫が必要です。といっても大したことしないけどw
以下のように JavaScript を使用して、該当の(section などの)要素を生成することで CSS が反映されるよーになります。

今回使ってみた新要素

  • header
  • footer
  • section
  • nav

上記以外で使えそうなのとしては

  • article
  • dialog
  • audio
  • video
  • canvas

なんかがメインで使うものかなーなんて思ってます。
ただどれも、現在はまだ草案の段階なので仕様や実装が変わる恐れもあるので注意です。
HTML5 についてはこちらのサイト が詳しいです。

HTML4(と XHTML) との違い

まず大きな違いは DOCTYPE 宣言。HTML5 では<!DOCTYPE html>と書きます。システム識別子、公開識別子が取り払われてとてもシンプルになってますw

次に、今までは文字コードの設定は<meta http-equiv="content-type" content="text/html; charset="utf-8">を使っていましたが、HTML5 からは<meta charset="utf-8">となります。

余談

ちなみに上記のサンプルページ、IE6 で見るとちょっと面白いことに・・w

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ