• 投稿者:
  • 投稿コメント:0件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2021年3月23日

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>&amp;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>&copy; 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>

コメントを残す