HTML5へのHTML4からの移行
この章では、完全にHTML4からHTML5に移行する方法についてです。
この章では、オリジナルのコンテンツや構造のものを破壊することなく、HTML5ページにHTML4のページを変換する方法を示しています。
あなたは、同じレシピを使用して、XHTMLからHTML5に移行することができます。
| 典型的なHTML4 | 典型的なHTML5 |
|---|---|
| <div id="header"> | <header> |
| <div id="menu"> | <nav> |
| <div id="content"> | <section> |
| <div class="article"> | <article> |
| <div id="footer"> | <footer> |
典型的なHTML4ページ
例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
body {font-family:Verdana,sans-serif;font-size:0.8em;}
div#header,div#footer,div#content,div#post
{border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
div#content {background-color:#ddd;}
div#menu ul {margin:0;padding:0;}
div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<div id="header">
<h1>Monday Times</h1>
</div>
<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
<div id="content">
<h2>News Section</h2>
<div id="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>
<div id="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>
</div>
<div id="footer">
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</div>
</body>
</html> »それを自分で試してみてください HTML5文書型に変更します
HTML4のDOCTYPEから、DOCTYPEを変更します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML5のDOCTYPEへ：
HTML5のエンコーディングに変更
HTML4から、 エンコード情報を変更します。
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">HTML5へ：
追加Shiv
HTML5セマンティック要素は、すべての最新ブラウザでサポートされています。
また、あなたができる"teach"どのように処理するために、古いブラウザを"unknown elements" 。
追加the shiv Internet Explorerのサポートのために：
例
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> »それを自分で試してみてください 記事を読むthe shivにおけるHTML5のブラウザのサポート 。
HTML5セマンティック要素のCSSを追加
既存のCSSスタイルを見てください：
div#header,div#footer,div#content,div#post {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
color:white;background-color:#444;margin-bottom:5px;
}
div#content {
background-color:#ddd;
}
div#menu ul {
margin:0;padding:0;
}
div#menu ul li {
display:inline; margin:5px;
}HTML5セマンティック要素のための同等のCSSスタイルを複製：
例
header,footer,section,article {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
} »それを自分で試してみてください HTML5に変更し<header>と<footer>
変更<div>を有する要素id="header"とid="footer" ：
<div id="header">
<h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
<p>&copy; 2014 w3ii. All rights reserved.</p>
</div>HTML5セマンティックに<header>と<footer>要素：
例
<header>
<h1>Monday Times</h1>
</header>
.
.
.
<footer>
<p>© 2014 w3ii. All rights reserved.</p>
</footer> »それを自分で試してみてください HTML5に変更し<nav>
変更<div>を持つ要素id="menu" ：
<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>HTML5セマンティック<NAV>要素に：
HTML5に変更し<section>
変更<div>を持つ要素id="content" ：
<div id="content">
.
.
.
</div>HTML5セマンティック<section>の要素に：
HTML5に変更し<article>
すべての変更<div>を持つ要素をclass="post" ：
<div class="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>HTML5セマンティックに<article>要素：
例
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article> »それを自分で試してみてください これらの削除"no longer needed" <style>要素を：
例
div#header,div#footer,div#content,div#post {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
color:white;background-color:#444;margin-bottom:5px;
}
div#content {
background-color:#ddd;
}
div#menu ul {
margin:0;padding:0;
}
div#menu ul li {
display:inline; margin:5px;
} »それを自分で試してみてください 典型的なHTML5ページ
最後に、あなたは削除することができ<head>タグを。 これらはHTML5で必要とされていません。
例
<!DOCTYPE html>
<html lang="en">
<title>HTML5</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,footer,section,article {
border:1px solid grey;
margin:5px;margin-bottom:15px;padding:8px;
background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
</style>
<body>
<header>
<h1>Monday Times</h1>
</header>
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>
<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
</section>
<footer>
<p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html> »それを自分で試してみてください 違い<article> <section>と<div>
混乱がある(lack of)との間にHTML5の規格の違い、 <article> <section>と<div> 。
HTML5規格では、 <section>要素は、関連要素のブロックとして定義されます。
<article>要素は、関連する要素の完全な、自己完結型ブロックとして定義されます。
<div>要素は、子要素のブロックとして定義されます。
それをどのように解釈するには？
上記の例では、使用してきた<section>関連のコンテナとして<articles> 。
しかし、我々は、使用している可能性があり<article>だけでなく記事のコンテナとして。
ここではいくつかの異なる例を示します。
<article>で<article> ：
<article>
<h2>Famous Cities</h2>
<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>
</article> »それを自分で試してみてください <div>で<article> ：
<article>
<h2>Famous Cities</h2>
<div class="city">
<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>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<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>
</div>
</article> »それを自分で試してみてください <div>で<section>で<article> ：
<article>
<section>
<h2>Famous Cities</h2>
<div class="city">
<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>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<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>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class="country">
<h2>England</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>
</div>
<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="country">
<h2>Japan</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>
</div>
</section>
</article> »それを自分で試してみてください