HTML4からHTML5への移行方法

2024-04-06

HTML4とHTML5の主な違い

主な違い

新しい要素と属性: HTML5では、video、audio、canvasなどの新しい要素が追加されました。また、各要素に新しい属性も追加されています。
構造化タグ: HTML5では、header、footer、section、articleなどの構造化タグが導入されました。これらのタグは、Webページの構造をより明確に示すために使用されます。
意味論的マークアップ: HTML5では、各要素の意味をより明確にするために、意味論的なマークアップが推奨されています。
マルチメディア: HTML5では、動画や音声などのマルチメディアコンテンツを簡単に埋め込むことができるようになりました。
エラー処理: HTML5では、構文エラーをより簡単に検出・修正できるようになりました。
モバイルデバイスへの対応: HTML5は、モバイルデバイスでの閲覧に最適化されています。

HTML4は厳格なDTD（Document Type Definition）に基づいていますが、HTML5はより柔軟な構文を採用しています。
HTML4ではフレームを使用できましたが、HTML5では非推奨となっています。
HTML4ではDOCTYPE宣言が必須でしたが、HTML5では省略可能です。

移行

HTML4からHTML5への移行は比較的簡単です。HTML5の新しい要素や属性を使用しない場合は、既存のHTML4のコードをそのまま使用することができます。

HTML4とHTML5のサンプルコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<h1>これはサンプルページです</h1>
<p>ここに何かテキストを入力します</p>
</body>
</html>

HTML5

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>これはサンプルページです</h1>
<p>ここに何かテキストを入力します</p>
</body>
</html>

ポイント

HTML5では、DOCTYPE宣言が簡略化されています。
HTML5では、lang属性で言語を指定することができます。
HTML5では、meta charset属性で文字コードを指定する必要があります。

その他のサンプル

HTML5の新しい要素を使用するサンプル:

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>サンプルページ</h1>
</header>
<main>
<p>ここに何かテキストを入力します</p>
</main>
<footer>
<p>Copyright &copy; 2023</p>
</footer>
</body>
</html>

HTML4とHTML5の比較表

項目	HTML4	HTML5
バージョン	1999年12月18日勧告	2014年10月28日勧告
DOCTYPE宣言	必須	省略可能
構文	厳格なDTDに基づく	より柔軟
フレーム	使用可能	非推奨
新しい要素	なし	video、audio、canvasなど
構造化タグ	なし	header、footer、sectionなど
意味論的マークアップ	推奨	必須
マルチメディア	Flashなど	video、audioなど
エラー処理	困難	容易
モバイルデバイス対応	限定的	最適化