【入門】【初心者】HTMLとHTML5の違いやバージョンまとめ

目次 [非表示]

1 HTMLの仕様を決めているW3C
2 ３種類のHTMLバージョン
3 Doctype宣言の違い
4 html要素と文字のエンコーディング
5 リンクタイプ
6 バージョンはどれを使えばいいの？

HTMLの仕様を決めているW3C

バージョンって何？でもちょろっと説明しましたが、HTMLにもバージョンというものがあり、バージョンによって書き方や使えるタグなどの仕様が異なっています。

このHTMLの仕様を決めているのはW3C（ダブリュスリーシー）です。

W3cはWorld Wide Web Consortiumの略で、World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体です。

３種類のHTMLバージョン

HTMLのバージョンには大きく３つあります。

昔はバージョンによって対応していないブラウザもありましたが、最近のブラウザはどれも対応しています。

また、バージョンによって、書き方や使えるタグが違ってきます。

HTML4.01　・・・　一般的に使われているHTMLのバージョン

XHTML1.0　・・・　HTML 4.01から派生したもので、特徴も似ています。しかし、記述方法に関してはかなり厳密です。その代わり、要素（タグ）を拡張することができるのが最大の特徴です

HTML5　・・・　最新のHTMLバージョン。使えるタグがかなり増え、書き方もシンプルになりました。ただブラウザによてまだ一部の機能が使えないものがあります。

Doctype宣言の違い

バージョンによってまずDoctypeの宣言の書き方が違ってきます。

Doctype宣言は下記のように<html>の先頭で「このHTMLはこのバージョンで書いてありますよ〜」と機械に伝える（宣言）するためのものになります。

詳しくはこちらのサイトなどを見て下さい。

【HTML入門】HTMLのバージョンとDOCTYPE宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&nbsp;"http://www.w3.org/TR/html4/strict.dtd">
<html>
　　<head>
 </head>
 <body>
 </body>
</html>

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

<html>

　　<head>

</head>

<body>

</body>

</html>

HTML4.01

HTML4.01では、下記３つのうちどれかのDoctype宣言を書く必要があります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&nbsp;"http://www.w3.org/TR/html4/strict.dtd">

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"&nbsp;"http://www.w3.org/TR/html4/frameset.dtd">

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

XHTML1.0

下記３つのうちどれかのDoctype宣言を書く必要があります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML5

HTML５ではDoctype宣言はとてもシンプルになりました。

<!DOCTYPE html>

1	<!DOCTYPE html>

html要素と文字のエンコーディング

HTML4.01

HTML4.01では、下記３つのうちどれかのDoctype宣言を書く必要があります。

<html lang="ja">
<head>
<meta charset="UTF-8">

<head>

XHTML1.0

<html&nbsp; xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<html  xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

<head>

HTML5

HTML５ではDoctype宣言はとてもシンプルになりました。

<html lang="ja">
<head>
<meta charset="utf-8">

<head>

リンクタイプ

HTML4.01

<link rel="stylesheet" type="text/css" href="style.css" />

1	<link rel="stylesheet" type="text/css" href="style.css" />

XHTML1.0

<link rel="stylesheet" type="text/css" href="style.css" />

1	<link rel="stylesheet" type="text/css" href="style.css" />

HTML5

HTML５ではtype属性を省略できるようになりました。

<link rel="stylesheet" href="style.css" />

1	<link rel="stylesheet" href="style.css" />

バージョンはどれを使えばいいの？

HTML５の基本的な機能はIE9以降から対応しているので、「IE9以降のブラウザで同じような見た目になればいい」といった現場であればHTML5を使いましょう。

（IE8以下へも「JavaScript」を用いれば対応は可能です。）

http://webukatu.com/wordpress/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E7%A8%AE%E9%A1%9E%E3%81%A8%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%AF%BE%E5%BF%9C/

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。