script要素
JavaScriptファイルを読み込ませるscript要素の記述も次のように変わります。
Before[XHTML 1.0]
<script type="text/javascript" src="coffee_files/common.js"></script>
After[HTML5]
<script src="coffee_files/common.js"></script>
HTML5ではscript要素のデフォルトのMIMEタイプがtext/javascriptとなり、使用するスクリプトがJavaScriptの場合はtype属性を省略できるようになりました。script要素の中にコードを記述する場合も同様にtype属性を省略できます。
古いInternet Explorer対応のためのJavaScript
古いInternet Explorer(IE9未満)をHTML5に対応させるには、JavaScriptを使って新しい要素を生成する必要があります。
After[HTML5]
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
ここでは条件付きコメントを使用して、IE9未満の場合のみライブラリー「html5.js」を適用しています。
CSSの指定
スタイルシートは、これまで通りlink要素で指定しますが、type属性によるMIMEタイプの指定は省略できるようになりました。
Before[XHTML 1.0]
<link type="text/css" rel="stylesheet" href="coffee_files/common.css" media="screen,print">
After[HTML5]
<link rel="stylesheet" href="starbucks.css" media="screen,print" />
今回のサンプルには登場しませんが、style要素でCSSを扱う場合も、type属性を省略できます。
div要素を削除してシンプルなソースコードにする
head要素周りのHTML5化が終わったら、いよいよbody要素に入りますが、以降の作業をスムーズにするため、body要素内のdivをいったんすべて削除します。削除したdivのうちいくつかは、新登場の要素に置き換えることになります。
今回のサンプルでは、合わせて既存の要素に付与されているid属性やclass属性も削除していますが、CSSの変更が無い場合はdiv要素のみ削除すればよいでしょう。