こんにちは、中村です。
前回は、HTML5についてピンポイントな説明になってしまいました。
今回は、もう少し一般的、初歩的なところの説明をしたいと考えています。
最小のHTML5
まずは、これをご覧ください。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="html5reset.css" /> <title>HTML5を学ぶ</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" /> <![endif]--> </head> <body></body> </html>
これは、HTML5を書く上で最低限必要なものだけを記述したものです。
それぞれ、XHTML1と比較しながら説明していきます。
○DOCTYPE宣言
DOCTYPEの記述は、大変簡単になっています。
XHTML1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5
<!DOCTYPE html>
○HTML要素
XHTML1ではXMLの名前空間を宣言する必要があったため、xmlns属性が必須でした。
しかしながら、HTML5はHTMLなので必要ありません。
ただし、HTML5でもxmlns属性にXHTML1と同様の記述し、xml宣言を先頭に追加することで、
XHTML1との互換性をもたせることができます。
XHTML1
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5
<html>
○文字エンコーディング
文字エンコーディングは、メタ要素を使用して定義しますが、HTML5では簡略化されたようです。
XHTML1
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
HTML5
<meta charset="UTF-8" />
○スタイルシート定義
link要素に対するtype属性は省略可能になったそうです。
XHTML1
<link rel="stylesheet" type="text/css" href="html5reset.css" />
HTML5
<link rel="stylesheet" href="html5reset.css" />
○IE8/7/6対応
HTML5の対応はIE9からのため、IE8以前のIEでは新規追加された要素（タグ）が正しく表示されない。
結果、CSSが正しく適用されず画面が崩れるようです。
それを解決するJSが公開されています。
http://html5shiv.googlecode.com/svn/trunk/html5.js
このJSでは以下の処理が記述されています。
- 新たらしい要素を使えるようにする
- IEで印刷が崩れないようにCSSで調整
2つ目の印刷云々は置いておくとして、どのように新しい要素を使えるようにしているかというと、
document.createElement('新要素');
をHTMLの先頭で実行しています。
createElementで新要素エレメントを作成することで、そのHTML中の新要素を正しく表示してくれるようになります。
すなわち、
var elements=['abbr', 'article', 'aside,audio', 'bb', 'canvas', 'datagrid', 'datalist', 'details', 'dialog',
'eventsource', 'figure', 'footer', 'header', 'hgroup', 'mark', 'menu', 'meter', 'nav', 'output', 'progress',
'section', 'time', 'video'];
for ( var i=0; i<elements.length; i++){
document.createElement(elements[i]);
}
のようなJSを実行すれば、IE8以前のブラウザでHTML5の新要素を問題なく使用出来るということです。
※当然、HTML5独自のAPIを使用する新要素は正しく動きませんが、タグは表示されるということです。
上記html5.jsを条件付きコメントを利用してIE8以前のみ実行することで、HTML5対応にしています。
以上でHTML5を利用するために最低限必要な情報を説明は終わりです。
HTML5には新しい要素が多く追加されていますので、今後機会があれば少しずつ紹介していきたいと思います。