HTML4からHTML5への移行
HTML4 からHTML5に移行するには
元のコンテンツやレイアウト構造を壊すことなく、HTML4ページをHTML5ページに変換する方法を説明します。
同じ方法を使用して、XHTMLからHTML 5に移行することができます。
| 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.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
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 class=”article”>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
<div class=”article”>
<h2>News
Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
</div>
<div id=”footer”>
<p>&copy; 2016 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
HTML5 Doctypeに変更
doctypeを変更します。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>HTML5文書型への変換
例文
<!DOCTYPE html>HTML5エンコーディングに変更
エンコード 情報を変更します。
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>HTML5のエンコーディングへ
例文
<meta charset=”utf-8″>HTML5のセマンティックエレメントに変更
既存のCSSには、要素をスタイルするためのIDとクラスが含まれています。
セマンティックエレメント（セマンティック要素）についてはこの記事で紹介しています
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
HTML5のセマンティック要素を同じCSSスタイルに置き換えます。
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
header, footer {
padding: 10px;
color: white;
background-color: black;
}
section {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
article {
margin: 5px;
padding: 10px;
background-color: white;
}
nav ul {
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
最後に、要素をHTML 5のセマンティック要素に変更します。
例文
<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>Lorem ipsum dolor sit amet..</p>
</article>
<article>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet..</p>
</article>
</section>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
<article><section> と <div>の違い
HTML5標準には、<article><section>と<div>の間に紛らわしい（欠けている）違いがあります
HTML 5規格では、 <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.</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.</p>
</article>
</article>
<div> の中に <article>
<article>
<h2>Famous Cities</h2>
<div class=”city”>
<h2>London</h2>
<p>London is the capital city of England.</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.</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.</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.</p>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class=”country”>
<h2>England</h2>
<p>London is the capital city of England.</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.</p>
</div>
</section>
</article>