HTML5 の正しい処理を古いブラウザに示す（teach）ことができます。
HTML5 は、すべての最新ブラウザでサポートされています。
また、新旧のすべてのブラウザは、認識できない要素を自動的にインライン要素として処理します。
このため、「未知」の HTML 要素の取扱いを古いブラウザに「教える」ことができます。
未知の HTML 要素の処理方法を、石器時代の IE6（Windows XP 2001）にさえも教えることができます。
HTML5 は、8つの新しいセマンティックな HTML 要素を定義しています。 これらは、すべてブロックレベル要素です。
古いブラウザにおける正しい動作を確保するためには、CSS display プロパティを block に設定します：
header, section, footer, aside, nav, main, article, figure {
display: block;
}
ブラウザのトリックで HTML に新しい要素を追加することができます：
この例では、<myHero> という HTML ページに新しい要素を追加し、そのページに表示スタイルを定義します：
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>A Heading</h1>
<myHero>My Hero Element</myHero>
</body>
</html>
Try it Yourself ❯
JavaScript ステートメントの document.createElement("myHero") は、IE9 以前のバージョンで新しいエレメントを作成するために必要です。
すべての新規 HTML5 要素については、上記のソリューションを使用できます。
しかしながら、IE8（およびそれ以前のバージョン）は未知の要素のスタイリングを許可していません！
ありがたいことに、Sjoerd Visscher が HTML5Shiv を作成してくれました！ HTML5Shiv は、バージョン 9 より前のバージョンの Internet Explorerで HTML5 要素のスタイリングを有効にする JavaScript の回避策です。
Internet Explorer 9 より古い IE ブラウザとの互換性を提供するには、HTML5shiv が必要です。
HTML5Shiv は、<head> タグの中に配置します。
HTML5Shiv は、<script>タグで参照する javascript ファイルです。
次のような新しい HTML5 要素を使用する場合は、HTML5Shiv を使用する必要があります： <article>、<section>、<aside>、<nav>、<footer>。
github から HTML5shiv の最新バージョンをダウンロードするか、 https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.jsで CDN 版を参照できます。
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
サイトに HTML5Shiv をダウンロードして保存したくない場合は、CDN サイトにあるバージョンが参照できます。
HTML5Shiv スクリプトは、<head> 要素内の全てのスタイルシートの後に配置しなければなりません：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</section>
</body>
</html>
Try it Yourself »