HTML4、XHTML、HTML5の違いとは？

2016年 08月 25日

ホームページを作る上で欠かせない『HTML』について前回のコラムで紹介したのですが、このHTMLにはいくつか種類があります。
現在でも使用されている『HTML4』、『XHTML』、『HTML5』の3つについて、違いを今回は紹介しようと思います！

『HTML4』の特徴と利点

HTML4.0は1997年に仕様が勧告され、その後1999年にはHTML4.0に修正が加えられた『HTML4.01』の仕様が勧告されました。
このHTML4は改定などはあったものの、15年以上に渡って親しまれてきたのですね。

HTML4の特徴は、現在のブラウザで対応していないものはほとんどないという利点があります。
つまりHTML4でホームページを作れば、閲覧が出来ない事はほぼありません！例えインターネットエクスプローラー等のブラウザのバージョンが古かろうが新しかろうが、問題なく閲覧できるでしょう。

また、このHTML4.01では決まり事も少なく、ところどころ細かい文法が間違っていてもホームページの形になってしまう事もありましたね…(笑)

『XHTML』の特徴と利点

『XHTML』はHTML4.01から派生したHTMLであり、特徴は似ています。
しかしHTML4に比べると記述方法は厳密になっており、細かいルールが決められています。

また、XHTMLを用いてホームページを作成する場合は、XHTMLはXMLという文法に合わせて再定義されたものなので『XML宣言』が必要になります。

<?xml version=”1.0″ encoding=”UTF-8″?>

これがXML宣言であり、これをHTMLの文書の先頭に記述する事が推奨されています。
『version=”1.0″』とは読みの通りXMLのバージョンの事で、1.0と記述をしておけば問題ありません。
『encoding=”UTF-8″』はそのHTMLファイルがどの文字コードで記述されているかを示すもので、UTF-8の他に『EUC-JP』、『Shift-JIS』があります。

また、HTML4と比べてタグや要素の書き方にも違いがあります。
例えばリストを作る場合で比べてみましょう。

HTML4.01で記述した場合
<UL>
<LI>リスト1
<LI>リスト2
<LI>リスト3
</UL>

XHTMLで記述した場合
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

HTML4ではタグはULやLIの様に大文字で記述をしても問題ないのですが、XHTMLでは小文字で記述をするようになりました。
また、HTMLでは各リストの要素の頭に『LI』があるだけですが、XHTMLでは『li』だけでなく、終了タグが必須な為『/li』も記述されています。

XHTMLでは終了タグが必須となりましたが、中には終了タグが存在しないタグもありますよね。
例を挙げるなら<br>や、<img src=”画像ファイル.jpg”>といったものですね。これらのタグには</br>や</img>のような終了タグがありません。
この様なタグの場合、タグの後ろに『/』を付けて

と表記をします。
この最後の『/』は無くてもホームページの表示には影響しない事が多いのですが、正しいHTMLで記述をする事はSEO対策にも繋がりますので、忘れないようにしましょう。

他にもドキュメントタイプの設定や細かい文書宣言など、HTML4に比べて決まりごとが多くなっています。

『HTML5』の特徴と利点

近年増えてきた新しいHTMLが『HTML5』です。
XHTMLに比べ、スッキリとした文書構造で様々な表現が出来るようになりました。

例えばHTMLファイルのヘッダー部分で比べてみても

XHTMLの場合

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
……

と、かなり長い要素を書く必要がありました。

しかしHTML5のですと…

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
……

と、これだけです！要素に必要な記述が短くなり、見やすくなりましたね。
この様にHTML5ではソースが見やすく、つづりの間違えも少なくなります。

他にもHTML5では新たに使えるタグも追加されており、特別なプラグインやコードを用いなくてもHTMl5だけで映像や音声、簡単なグラフの描画まで出来てしまいます。

HTML5の欠点としては新しいHTMlであるが故に、IE8等、古いブラウザでは対応していない事があります。
しかし標準ブラウザがIE8であったWindowsXPはサポートが終了し、Windows7や8、10に乗り換えた人も多くなってきた為、古いブラウザを利用している人はかなり少なくなりました。
その為HTML5でホームページを制作する事が今では主流なのではないでしょうか。

これからホームページを作るなら

HTML4やXHTMは現在ほとんどのブラウザで問題なく閲覧できる事はやはり魅力的です。
HTML4よりXHTMLの方が決まりごとが多く記述は大変かもしれませんが、その分正確なホームページが出来るので、使うならXHTMLが良いでしょう。

しかし今後はHTML5がホームページの標準になりますので、早めにHTML5の知識を身に付けたいところです。
確かに一部のブラウザではHTML5に対応していませんが、近年のパソコンであれば大多数は問題なく閲覧が可能です。
便利なタグが追加されソースコードも見やすくなっていますので、これからHTMLの勉強をされる方はぜひHTML5を活用してみて下さい！

お知らせ