噂のHTML5にとっかかってみた

さて、今回はHTMLのお話。
巷では、HTML5という言葉を本当によく目にしますし、聞きます。
とあるセミナーへ行った時も、必須技術の１つにHTML5が含まれていました。
HTML5とセットで言われているのが、CSS3。
この2つは間違いなく使いこなしていくことになるでしょう。

といっている私も、まだまだ勉強しきれていないのですが、まとまった時間がとれたのでとっかかってみました。

新規ドキュメント作成の基本

まず、現状のHTMLとの差異を確認してみましょう。
Dreamweaverなどで新規のhtml文書を作成するとき、デフォルトでこんなコードが生成されると思います。（選んだ文字エンコードやDOCTYPE宣言によっては、以下とまったく同じものが生成されない場合もあります。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
 content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>

<body>
</body>
</html>

なんの手も加えていない、空っぽのままです。
これが、HTML5バージョンでは、

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css">
    <title>無題ドキュメント</title>
    <meta http-equiv="Content-Type"
 content="text/html; charset=UTF-8" />
  </head>
  <body>

  </body>
</html>

となります。
DOCTYPE宣言の呪文とか、文字エンコードの呪文とか、いろいろ省略できるようになりました。
HTML5コードの方が、HTMLを知らない人に説明しやすそうなほどですね。

さらに、HTML5とは仲良くないIE兄弟たちに、「だからー、HTML5なんだってー。もう！」と軽く「め！！」って怒るためのjavascriptを内に埋め込みます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css">
    <title>無題ドキュメント</title>
    <meta http-equiv="Content-Type"
 content="text/html; charset=UTF-8" />
<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
  </head>
  <body>

  </body>
</html>

こちら、作ってくれたRemy SharpさんがGoogle codeで公開してくれています。

Remy Sharpさんのサイト
http://remysharp.com/2009/01/07/html5-enabling-script/

Google Code
http://code.google.com/p/html5shiv/

とてもありがたい。これでIE兄弟でもレイアウト可能になりました。

まず、とっかかりとして、この文書を作れば、内にどんどんコードを書いていけば良いということです。