古いブラウザで HTML5 を処理できるようにすることができます。
最新のブラウザはすべて HTML5 をサポートしています。
また、古いブラウザでも新しいブラウザでも、認識されない要素は自動的にインライン要素として扱われます。
このため、古いブラウザが「不明な」HTML 要素を処理できるようにすることができます。
注: 石器時代の IE6 に未知の HTML 要素の処理方法を教えることもできます。
HTML5 では、8 つの新しいセマンティック HTML 要素が定義されています。 すべてはブロックレベルの要素です。
古いブラウザで正しく動作するように、CSS の display プロパティを block に設定できます。
header, section, footer, aside, nav, main, article, figure {
display: block;
}
ブラウザのトリックを使用して、HTML に新しい要素を追加できます。
この例では、<myHero> という名前の新しい要素を HTML に追加し、その表示スタイルを定義します。
<!DOCTYPE html>
<html>
<head>
<title>Creating an HTML Element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>
JavaScript ステートメント document.createElement("myHero") を追加しました (IE のみ)。
上記のスキームはすべての新しい HTML5 要素に使用できますが、次の点が異なります。
注:Internet Explorer 8 以前のバージョンでは、不明な要素にスタイルを追加できません。
幸いなことに、Sjoerd Visscher は「JavaScript を有効にする HTML5」「ザ シブ」 を作成しました。
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
上記のコードはコメントですが、IE9 の以前のバージョンではそれを読み取って理解できます。
<!DOCTYPE html> <html> <head> <title>Styling HTML5</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <h1>My First Article</h1> <article> 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. </article> </body> </html>
Internet Explorer は新しい要素を読み取る前にすべての新しい要素を認識する必要があるため、shiv コードを参照するリンクは <head> 要素内に配置する必要があります。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Skeleton</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
<h1>HTML5 SKeleton</h1>
</header>
<nav>
<ul>
<li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
<li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
<li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>
<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>
<footer>
<p>© 2016 W3School. All rights reserved.</p>
</footer>
</body>
</html>