HTML5 追移

HTML4からHTML5への移行

この章では、典型的なHTML4ページから典型的なHTML5ページへの移行方法を説明します。

この章では、既存のHTML4ページをHTML5ページに変換する方法を説明します。元の内容と構造を破壊することなく行います。

注釈：同じスキルを使って、HTML4およびXHTMLからHTML5への移行ができます。

典型的 HTML4 典型的 HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <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>ニュース</li>
    <li>スポーツ</li>
    <li>天気</li>
  </ul>
</div>
<div id="content">
<h2>ニュースセクション</h2>
<div id="post">
  <h2>ニュース記事</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>ニュース記事</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>© 2014 Monday Times. 全部の権利は保存されています。</p>
</div>
</body>
</html>

自分で試してみる

HTML5 Doctypeに変更します

ドキュメントタイプを修正します、HTML4 doctypeから：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML5 doctypeに変更します：

<!DOCTYPE html>

自分で試してみる

HTML5のエンコーディングに変更します

エンコーディング情報を修正します、HTML4から：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

HTML5に変更します：

<meta charset="utf-8">

自分で試してみる

shivを追加します

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

さらに、古いブラウザに「未知の要素」を処理する方法を「教える」ことができます。

Internet Explorerのサポートのために追加されたshiv：

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

自分で試してみる

注釈：さらに、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> に変更します

id="header" と id="footer" の <div> 要素を：

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. すべての権利は保存されています。</p>
</div>

HTML5の意味のある要素<header>と<footer>に変更します：

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. 全ての権利は保留です。</p>
</footer>

自分で試してみる

HTML5の<nav>に変更します：

id="menu"の<div>要素：

<div id="menu">
  <ul>
    <li>ニュース</li>
    <li>Sports</a></li>
    <li>天気</li>
  </ul>
</div>

HTML5の意味のある要素<nav>に変更します：

<nav>
  <ul>
    <li>ニュース</li>
    <li>Sports</a></li>
    <li>天気</li>
  </ul>
</nav>

自分で試してみる

HTML5の<section>に変更します：

id="content"のthe<div>要素：

<div id="content">
.
.
.
</div>

HTML5の意味のある要素<section>に変更します：

<section>
.
.
.
</section>

自分で試してみる

HTML5の<artice>に変更します：

class="post"のすべての<div>要素：

<div class="post">
  <h2>ニュース記事</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

HTML5の意味のある要素<artice>に変更します：

<article>
  <h2>ニュース記事</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

自分で試してみる

これら「必要不再是」のスタイルを削除します：

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>ニュース</li>
    <li>スポーツ</li>
    <li>天気</li>
  </ul>
</nav>
<section>
<h2>ニュースセクション</h2>
<div id="post">
  <h2>ニュース記事</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>
</div>
<div id="post">
<h2>ニュース記事</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>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. 全部の権利は保存されています。</p>
</footer>
</body>
</html>

自分で試してみる

<article>、<section>、<div> 之间的差異

HTML5 標準では、<article>、<section>、<div> 之间的差異は非常に小さいため、混乱を招きます。

HTML5 標準では、<section> 要素は関連要素のブロックとして定位されています。

<article> 要素は完全に自包含の関連要素のブロックとして定義されています。

<div> 要素はブロックの子要素として定義されています。

どう理解するのでしょうか？

上記の例では、<section> を関連する <articles> のコンテナとして使用しました。

しかし、<article> を記事のコンテナとして使用することもできます。

以下にいくつかの異なる例があります：

<article> 中的 <article>：
<article>
<h2>有名な都市</h2>
<article>
<h2>ロンドン</h2>
<p>ロンドンはイングランドの首都で、英国で最も人口が多い都市です。それは、</p>
<p>13百万以上の人口を持つ都市地域があります。</p>
</article>
<article>
<h2>パリ</h2>
<p>パリはフランスの首都で、人口が最も多い都市です。</p>
</article>
<article>
<h2>東京</h2>
<p>東京は日本の首都であり、大東京地域の中心地です,</p>
そして世界で最も人口が多い都市地域です。</p>
</article>
</article>

自分で試してみる

<article>内の<div>：</div>
<article>
<h2>有名な都市</h2>
<div class="city">
<h2>ロンドン</h2>
<p>ロンドンはイングランドの首都で、英国で最も人口が多い都市です。それは、</p>
<p>13百万以上の人口を持つ都市地域があります。</p>
</div>
<div class="city">
<h2>パリ</h2>
<p>パリはフランスの首都で、人口が最も多い都市です。</p>
</div>
<div class="city">
<h2>東京</h2>
<p>東京は日本の首都であり、大東京地域の中心地です,</p>
そして世界で最も人口が多い都市地域です。</p>
</div>
</article>

自分で試してみる

<article>内の<section>内の<div>：</section>
<article>
<section>
<h2>有名な都市</h2>
<div class="city">
<h2>ロンドン</h2>
<p>ロンドンはイングランドの首都で、英国で最も人口が多い都市です。それは、</p>
<p>13百万以上の人口を持つ都市地域があります。</p>
</div>
<div class="city">
<h2>パリ</h2>
<p>パリはフランスの首都で、人口が最も多い都市です。</p>
</div>
<div class="city">
<h2>東京</h2>
<p>東京は日本の首都であり、大東京地域の中心地です,</p>
そして世界で最も人口が多い都市地域です。</p>
</div>
</section>
<section>
<h2>有名な国々</h2>
<div class="country">
<h2>イングランド</h2>
<p>ロンドンはイングランドの首都で、英国で最も人口が多い都市です。それは、</p>
<p>13百万以上の人口を持つ都市地域があります。</p>
</div>
<div class="country">
<h2>フランス</h2>
<p>パリはフランスの首都で、人口が最も多い都市です。</p>
</div>
<div class="country">
<h2>日本</h2>
<p>東京は日本の首都であり、大東京地域の中心地です,</p>
そして世界で最も人口が多い都市地域です。</p>
</div>
</section>
</article>

自分で試してみる