HTML5を使うときに必要な準備
現時点でHTML5を使用する場合には、未対応のブラウザーのために簡単な準備が必要です。
古いIE対応のためのJavaScript
IE8以下では、未知の要素（つまりHTML5）のDOMを正しく構成しません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>HTML5 IE8以下対応サンプル 1</title>
<style>
body {
width: 500px;
margin: 30px auto;
}
header, section, footer {
margin-bottom: 10px;
padding: 10px;
border: solid 1px #333;
}
</style>
</head>
<body>
<header>
<h1>HTML5 IE8以下対応サンプル 1</h1>
</header>
<section>
<h2>内容</h2>
<p>特に何もしない状態。</p>
</section>
<footer>
<p>© 2011 hamashun</p>
</footer>
</body>
</html>
たとえば上のソースコードをIE8で開くと、以下のように表示されます。
この問題を解決するためには次のようなJavaScriptを使います。
<script>
document.createElement('header');
document.createElement('section');
document.createElement('footer');
/* 必要な新要素の分だけ繰り返す */
</script>
（''）の中に指定した要素を生成するだけの単純なJavaScriptです。このサンプルをIE8で確認すると以下のように表示されます。
ただし、createElement()で要素を生成する方法では印刷時に崩れる可能性があるので、実務では読み込むだけで対応してくれるライブラリーを使うと手軽で安心です。
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
- html5shim - HTML5 IE enabling script - Google Project Hosting
- http://code.google.com/p/html5shim/
どちらの方法を使う場合でもIE8以下にだけ適用できればよいので、条件付きコメントを使用してもよいでしょう。
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('section');
document.createElement('footer');
</script>
<![endif]-->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
※これらのスクリプトは、</head>より前に記述する必要があります。
2012年6月5日追記：html5shimの使用方法に変更があり、ファイルをダウンロードして使うことが記載されています。詳しくは IE対応でよく利用するhtml5shivの使用方法変更について｜Blog｜Skyward Designをご参照ください。
いくつかの要素にdisplay: block;を指定
HTML5の要素に未対応のブラウザーでは、新しい要素はすべてdisplay: inline;の状態で表示されます。そのため、要素によってはdisplya: block;を指定する必要があります。
header, section, footer {
display: block;
}
このサンプルをIEで開くと以下のように表示されます。HTML5の要素がブラウザーに認識され、display: blockが適用されたことで、HTML5に対応しているブラウザーと同様、意図したとおりに表示されました。
display: inline;の表示のままでよい要素に関しては、特に指定する必要はありません。
実務で使用するかどうかの判断
ここまでHTML5の基本について解説してきましたが、現時点で実務に使用するべきか迷う方もいることと思います。確かにHTML5は策定中であり、今後仕様が変更される可能性もありますが、ブラウザーは日々実装を進めていますし、W3Cの策定の流れ上、2つ以上のブラウザーでの完全な実装を持って勧告へ向かうため、W3Cの勧告を待つのは慎重すぎるかもしれません。
判断材料の1つとして、要素ごとの安定度合いをチェックする方法を紹介します。WHATWGのHTML5の仕様書にはそれぞれの要素のステータスが表示されています。
たとえば、br要素を見ると、"Implemented and widely deployed"と書いてあり、仕様が実装済みであることが分かります。
- 4.6 Text-level semantics ― HTML Standard
- http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-br-element
一方、hgroup要素を見てみると、"Being considered for removal"と書いてあり、この要素は仕様から削除される可能性があることが分かります（記事執筆時点）。
- 4.4 Sections ― HTML Standard
- http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element
MathMLを見ると、表示されるブラウザーのアイコンが少なかったり、表示が薄くなっていたりして、部分的な実装や未実装のブラウザーがあることが分かります（記事執筆時点）。
- 4.8.12 The map element ― HTML Standard
- http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#mathml
これらを踏まえて、「HTML5を採用するか」ではなく、「HTML5の要素でどの安定度までを採用するか」と考えるのも、1つの基準となるでしょう。
