このページの本文へ

XHTML1.0とHTML5の違いをスタバのページで紹介 (2/6)

2011年08月24日 10時01分更新

文●浜 俊太朗/ライブドア

  • この記事をはてなブックマークに追加
本文印刷

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要素のみ削除すればよいでしょう。

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています