HTML4.01 と XHTML1.0 の違い

XHTML 1.0で文書を作成する際には、以下の点に注意が必要です。

  • 文書の先頭にXML宣言を記述する必要がある。（状況によっては省略することも可能）
  • DOCTYPE宣言の内容がHTML 4.01とは異なる。
  • html要素に名前空間（xmlns=""）を指定する必要がある。また、言語コードの指定方法がHTMLとは異なる。
  • タグの記述を省略できない。（終了タグを必ず記述する）
  • 空要素の記述方法がHTMLとは異なる。（ /> で終了させる必要がある）
  • 要素名と属性名は小文字で記述する必要がある。
  • 属性値は必ず引用符でくくる。
  • 属性の最小化は行えない。（checked="checked" といった感じで記述する必要がある）
  • 要素の識別子はid属性で指定する必要がある。
  • style要素とscript要素内ではコメント宣言によるエスケープを行わない。（スタイルやスクリプトは外部ファイルを使用した方が良い）
  • &は必ず&と記述する。

XHTML 1.0 の記述例

<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<link rel="stylesheet" type="text/css" href="style.css" />

<title>文書のタイトル</title>

</head>
<body>

<p><img src="example.gif" alt="サンプル" /></p>

<ul>
<li>終了タグを必ず入れる</li>
</ul>

<form method="post" action="example.cgi" id="demo" name="demo">
<p><input type="checkbox" name="c1" value="サンプル" checked="checked" /> サンプル</p>
</form>

</body>
</html>

XML宣言

UTF-8またはUTF-16以外の文字コードを使用する場合は、文書の先頭にXML宣言を記述する必要があります。

例えば、Shift-JISを使用した文書では次のような記述になります。

<?xml version="1.0" encoding="Shift_JIS"?>

文字コードがUTF-8またはUTF-16の場合には、この宣言を省略することができます。

また、Shift-JISやEUC-JPなどの場合でも、HTTPヘッダで文字コードが指定されていれば、この宣言を省略することが可能です。

  • 省略できる場合であっても、XML宣言を記述しておくことが推奨されています。

注意点

IE 6では、XML宣言を記述すると表示モードが互換モードになってしまうというバグがあります。CSSの解釈などに影響が出ますので、この宣言を記述する際には注意してください。

XHTML 1.0 のDOCTYPE宣言

DOCTYPE宣言は、XML宣言の後に記述します。

XHTML 1.0の記述例

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

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

Frameset （フレーム設定用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • DOCTYPE宣言に関する詳細は、HTML 4.01のDOCTYPE宣言をご覧ください。

html要素に関する指定

html要素には、xmlns属性を使用して名前空間（http://www.w3.org/1999/xhtml）を指定しておきます。

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

言語コードの指定はxml:lang属性で行いますが、後方互換を考慮してlang属性でも同じ値を指定しておきます。

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

タグの記述を省略できない

HTMLでは、一部の要素（body要素、li要素、p要素 等）でタグの省略が可能でしたが、XHTMLではそれらを省略することはできません。

例えば、HTMLではli要素の終了タグを省略することができますが、XHTMLではちゃんと終了タグを記述しなければなりません。

<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>

空要素の記述方法

XHTMLでは、空要素の最後を /> で閉じる必要があります。

次のように、半角スペースに続けてスラッシュ（ / ）を入れます。

<br />

<hr />

<img src="example.gif" alt="サンプル" />

要素名と属性名は小文字で記述する

XHTMLでは、要素名と属性名は小文字で記述しなければなりません。

○ <img src="example.gif" alt="サンプル" />
× <IMG src="example.gif" alt="サンプル" />
× <IMG SRC="example.gif" ALT="サンプル" />

属性値は必ず引用符でくくる

XHTMLでは、属性の値は必ず引用符でくくっておく必要があります。

○ <img src="example.gif" alt="サンプル" width="100" height="50" />
× <img src=example.gif alt="サンプル" width=100 height=50 />

属性の最小化は行えない

XHTMLでは、属性の最小化は行えません。

checked属性やselected属性などは、次のように記述しておく必要があります。（属性名を属性値として記述します）

<input type="checkbox" value="サンプル" checked="checked" />

<option selected="selected">選択肢</option>

要素の識別子はid属性で指定する

XHTMLでは、要素の識別子はid属性で指定する必要があります。

a要素、applet要素、form要素、frame要素、iframe要素、img要素、map要素の識別子は、name属性ではなくid属性で指定しなければなりません。

<a id="example">サンプル</a>

後方互換を考慮する場合は、同じ値でname属性も指定しておきます。

<a name="example" id="example">サンプル</a>
  • Strict DTDの場合は、applet要素、form要素、frame要素、iframe要素、img要素に対してはname属性を指定できません。

style要素とscript要素内のコメント宣言

style要素とscript要素内では、コメント宣言によるエスケープを行わないようにします。

  • それぞれの要素内では、<や>を記述しないようにします。（タグとして認識されてしまうので）
<style type="text/css">

p { line-height: 130%; }

</style>
  • スタイルシートやスクリプトコードは、外部ファイルに記述することが推奨されています。

&は必ず&amp;と記述する

&記号は、文字参照で&amp;と記述しておく必要があります。（属性値の文字列を含む）

example.cgi?mode=view&amp;no=123