ma-san.org - 仙台のWeb製作者 > XHTML CSS > 今更ながらHTMLとXHTMLの違いについて

今更ながらHTMLとXHTMLの違いについて

Posted by: ma-san
2009年10月16日 18:06
XHTML CSS

HTMLとXHTMLの違いについて質問されることが未だに多いので、自分用メモとしてエントリしておきます。

HTMLとXHTMLについて

HTML4.01: Hyper Text Markup Languageの頭文字を取ったもので、文書を意味付け（マークアップ）しWWW上に発信する共通言語です。HTML4.01はその最新版です。
XHTML1.0: 上記のHTMLをXMLの文法に基づいて再定義したものでHTMLに比べ文法が厳密になっていています。現在では、HTMLに変わりほぼ主流となっています。

HTMLとXHTMLは同じハイパーテキストマークアップ言語であり、文法もよく似ています。そのためHTMLを知っている人なら今直ぐにでも XHTMLでWebページを作ることができます。しかし、似ているせいで「どこが違うのか・何が違うのか」があまり分かり易くありません。そこで、 HTML4.01とXHTML1.0の相違点を比較します。

コードサンプル

■ HTML4.01(Strict)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML lang="ja">
<HEAD>
<META HTTP-EQUIV=content-type CONTENT="text/html; CHARSET=UTF-8" />
<TITLE>ページタイトル</TITLE>
</HEAD>
<BODY>
<P>あいうえお
<P><SPAN>かきくけこ</P></SPAN>
<HR>
</BODY>
</HTML>

■ XHTML1.0(Strict)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>ページタイトル</title>
</head>
<body>
<p>あいうえお</p>
<p><span>かきくけこ</span></p>
<hr />
</body>
</html>

似たような形をしていますが、細かいところが違っています。
もっと分かり易く、表にして比較してみましょう。

相違点比較表

行番号	HTML4.01	XHTML1.0
01		<?xml version="1.0" encoding="UTF-8"?>
XHTMLにはHTMLにはないものが記述されてます。これはXML宣言と言うもので、XHTMLはXMLの文法に基づいて再定義したものなので、文書の先頭に記述することが推奨されてます。「version="1.0"」は、その名の通りにバージョン情報のことで、1.0にしておけば問題ありません。「encoding="UTF-8"」は、その文書がどの文字コードで記述されているかを示すもので、日本語の場合は「UTF-8、EUC-JP、Shift-JIS」の何れかです。
02	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
この行にはHTML、XHML共に同じようなものが記述されていますが、XHTMLでは"HTML"が"html"と小文字で記述しなければいけません。これは、DOCTYPE宣言（または、文書型宣言）と呼ばれるものです。一口にXHTMLと言っても複数のバージョンがあるため、その文書がどのバージョン・定義（DTD）に基づいて記述されているか示すために必ず必要なものです。 DTDとは、以下の三つのことです。 Strict（厳密型）非推奨要素・属性を使用せず、厳密な文法に則ってWebページを作成する場合に使います。 Transitional（移行型）非推奨要素・属性を使用し、互換性の高いWebページを作成する場合に使います。 Frameset（フレーム使用型）フレームを使用し、Webページを作成する場合に使います。
03	<HTML lang="ja">	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
このhtml要素の部分では名前空間と言語コードを指定します。HTMLは言語コードだけでいいのですが、XHTMLでは「xmlns="http://www.w3.org/1999/xhtml"」と名前空間を指定する必要があります。また、XHTMLの場合は言語コードをxml:lang属性で指定しますが、後方互換を考慮してlang属性でも同じ値を指定します。
04	<HEAD>	<head>
HTMLでは要素を記述する際には大文字でも小文字でもよいことになっていましたが、XHTMLでは小文字と決められています。
05	<META HTTP-EQUIV=content-type CONTENT="text/html; CHARSET=UTF-8" />	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
XHTMLでは要素・属性共に小文字のみと決められ、ダブルクォーテーション(")の省略もできません。しかし、ブラウザによっては文法が間違っていてもそのまま表示してしまうので気付かない場合があります。注意しましょう。
09	<P>あいうえお	<p>あいうえお</p>
XHTMLでは終了タグを省略できません。
10	<P><SPAN>かきくけこ</P></SPAN>	<p><span>かきくけこ</span></p>
XHTMLは整形式で記述しなければいけません。サンプルのHTMLでは<span>の中に<p>の終了タグが混入してしまっています。
11	<HR>	<hr />
空要素の場合は、" /"と記述します。空要素とは、要素で囲まないもののことです。例えばmeta要素、link要素、img要素がそれに当たります。

以上、HTMLとXHTMLの記述の違いでした。どれも小さな違いですが、それだけに間違いに気づき難いものです。
XHTMLが主流の今でも、古いサイトの更新をするときなどにはHTMLで書くことがありますし、元々HTMLで書いていたものに間違ってXHTMLを追加してしまうことがないように気をつけましょう。

更に、今後はHTML5+CSS3の普及も見越しておきたいですね。