えど

HTML5で組んでみた

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

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

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

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

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

http://css-eblog.com/eblog_sample/0906/html5_test/

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

IE で HTML5 を使う際の注意点

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

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

今回使ってみた新要素

  • header
  • footer
  • section
  • nav

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

  • article
  • dialog
  • audio
  • video
  • canvas

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

HTML4(と XHTML) との違い

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

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

余談

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

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