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">
<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 type="text/css">
p { line-height: 130%; }
</style>
※スタイルシートやスクリプトコードは、外部ファイルに記述することが推奨されています。
- サイト内検索