IE8以下への対応

IE8以下は、HTML5の新要素には対応していません。（そのため、スタイルが適用されなくなってしまいます）

IE8以下にも対応させたい場合は、次のJavaScriptを使って新要素を認識させる必要があります。（新要素の部分には、認識させたい要素名を記述します）

document.createElement('新要素');

よく分からない（または自分で設定するのが面倒な）場合は、Google Codeで公開されているhtml5shiv（html5.js）を読み込ませることで、HTML5の新要素を認識させることが可能になります。

このスクリプトを読み込ませる場合は、head要素内に以下の内容を記述しておきます。（if lt IE 9という部分は、IE9未満にのみ読み込ませるという指定です）

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  • ただし、上記の設定を行っている場合でも、JavaScriptをオフにしているIE8以下には適用されません。

CSSの設定

HTML5の新要素のうち、ブロックとしてレンダリングさせたい要素に対して、display: block を指定しておきます。

  • 以下の設定内容は一例です。必要に応じて書き直してください。
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}

このように設定しておくことで、上記の要素がIE8以下でもブロックとしてレンダリングされるようになります。

HTML5の雛形（旧ブラウザ対応）

上記の2点をまとめると、以下のようなコードになります。

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="UTF-8">

<title>タイトル</title>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
</style>

</head>
<body>

<h1>文書の内容</h1>

<p>内容</p>

</body>
</html>