HTML5 ブラウザサポート

一部の古いブラウザ（HTML5非対応）に HTML5 をサポートさせることができます。

HTML5 ブラウザサポート

現代のブラウザはすべて HTML5 をサポートしています。

さらに、すべてのブラウザは、古いものも最新のものも、認識できない要素をインライン要素として自動的に処理します。

このため、あなたは「教える」ブラウザに処理させる「未知の」HTML 要素を。

	さらに、IE6（Windows XP 2001）ブラウザに未知の HTML 要素を処理させることさえできます。

HTML5 要素をブロック要素として定義する

HTML5 は 8 つの新しい HTMLセマンティック（semantic）要素です。これらの要素はすべてブロックレベル要素です。

古いバージョンのブラウザでこれらの要素を正しく表示できるようにするには、CSS のdisplayプロパティ値をblock:

例

header, section, footer, aside, nav, main, article, figure { display: block; }

HTML に新しい要素を追加する

HTML に新しい要素を追加することができます。

この例では、HTML に新しい要素を追加し、その要素にスタイルを定義しています。要素名は<myHero> ：

例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML に新しい要素を追加する</title> <script>

document.createElement("myHero")

</script> <style>

myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; }

</style> </head> <body> <h1>私の最初の見出し</h1> <p>私の最初の段落。</p> <myHero>私の最初の新要素</myHero> </body> </html>

試してみる »

JavaScript ステートメントdocument.createElement("myHero")は IE ブラウザに新しい要素を追加するためのものです。

Internet Explorer ブラウザの問題

上記の方法を使用して IE ブラウザに HTML5 要素を追加できますが、次の点に注意してください：

	Internet Explorer 8 およびそれ以前の IE バージョンのブラウザは、上記の方法をサポートしていません。

Sjoerd Visscher が作成した "HTML5 Enabling JavaScript" を使用できます。 shivこれを使用してこの問題を解決します：

上記のコードはコメントであり、IE ブラウザのバージョンが IE9 より小さい場合に html5.js ファイルを読み込んで解析する役割があります。

注意：国内ユーザーは当サイトの静的リソースライブラリを使用してください（Google リソースライブラリは国内では不安定です）：

IE ブラウザには html5shiv が良い解決策です。html5shiv は主に、HTML5 で提案された新しい要素が IE6-8 で認識されない問題を解決します。これらの新しい要素は親ノードとして子要素をラップできず、CSS スタイルも適用できません。

完璧な Shiv ソリューション

例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 をレンダリングする</title>  </head> <body> <h1>私の最初の記事</h1> <article>サンプル —— 学ぶのは技術だけでなく、夢でもあります！！！</article> </body> </html>

試してみる »

html5shiv.js の参照コードは <head> 要素内に置く必要があります。IE ブラウザが HTML5 の新しい要素を解析する際に、最初にこのファイルを読み込む必要があるからです。

その他の拡張

HTML5

HTMLメディア

HTMLリファレンスマニュアル

HTML5 ブラウザサポート