HTMLとXHTMLの違い

HTMLとXHTMLの違い
XHTMLの基本形
HTMLとの互換性
要素の廃止と追加
XHTMLのルール
XHTMLのテンプレート
XHTML化支援TOOL
要素

XHTMLは、HTML の簡便さを残しつつ、XML の論理的厳密性を備えていますので、HTML のようにルーズなコーディングでもブラウザで問題なく表示される、ということがほとんどありません。つまり、HTMLよりも厳格なコーディングが求められることになります。ただ、使用する要素や属性、属性値はほとんど変わりません。

書式についてはHTMLと少し異なりますのが、詳しくはXHTMLのルールで説明します。

XHTMLの基本形

整形式XML

XHTMLはXMLの応用言語ですから、開始タグと終了タグがきちんとバランスし、要素が正しいツリーを形成する整形式であることが一番の基本です。タグを省略せず、大小文字を統一して記述したHTMLは、少しの修正だけで整形式XMLとすることができます。

空要素タグを />で閉じる
属性値を全て引用符で囲み、属性名を省略した最小化を行わない

XML名前空間を宣言する

もっとも、整形式XMLにしただけでは、厳密にはHTMLともXHTMLとも言えない、自己流のXMLということになってしまいます。利用しているタグセットがXHTMLのものであることを示すためには、ルート要素（html要素）でXHTMLのXML名前空間を宣言しておきます。

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

XML対応ツールやブラウザは、これによって文書で用いられているタグセットがXHTMLのものであることを認識できます。多くの場合、文書をXHTMLとして標準的に（見出し、段落などの要素をそれらしく）レンダリングして表示してくれます。

厳密適合のXHTML

XHTML文書をスキーマ（DTDなど）に対して検証したり、仕様書に厳密適合させる必要がある場合は、昔ながらの文書型宣言を置きます。また、一般にXML文書はXML宣言で始めることが推奨され、特に文字コードの扱いによってはこの宣言が必須になることがあります。これらを加えたXHTML1.0適合文書は、次のようなものです。

<?xml version="1.0" encoding="Shift_JIS"?>
<!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>
<title>XHTMLの書き方と留意点</title>
</head>
<body>
<p>XHTMLについて説明しましょう。</p>
</body>
</html>

HTMLとの互換性について

重要なのは、どんなタグの記法を用いれば、HTMLとの互換性を保ちつつXML(XHTML)としての機能を加えることができるのかということです。いくつかポイントを列挙します。

全てのタグ（要素タイプ名、属性名）は小文字で記述するHTMLでは大文字と小文字は区別されませんでしたが、XMLではこれを区別するため、IMG と img は別の要素タイプになってしまいます。

XHTMLでは全ての要素タイプと属性は小文字で定義されたので、タグの記述にあたっても小文字を用いなければなりません（これまで書いたHTMLを書き直すのは大変…）。

また、属性名だけでなく、method="post"等のように、属性値がDTDで選択肢が定義されているものは、その通り記述する必要があります。

これらもみな小文字で定義されているので、「タグは小文字で書く」と考えておくのがよいでしょう。

属性の値は必ず引用符で囲むHTMLにおいては、値が数字など特定の値のみの場合は引用符を省略してwidth=100 のような記述が認められていましたが、XHTMLでは全ての属性値を引用符で囲でwidth="100" のようにしなければなりません。

終了タグを省略しない

<img border="0" src="../../images/picons.png" alt="MOPAのロゴマーク">

↓

<img border="0" src="../../images/picons.png" alt="MOPAのロゴマーク" />

空要素のタグは />で閉じるまた、HTMLの img 要素や br 要素のように、内容モデルを持たない空要素（HTMLでは開始タグしか使わないもの）は、XMLにおいては<br/>という具合に、タグを閉じるときに/>を使わなければなりません（空要素タグと呼ばれています）。

ただし、この書式ではHTMLブラウザがタグを正しく認識できない可能性があるので、/ の前にスペースを置いて、<br />のように記述します。

ファイル内の位置を示すにはid属性を併記するHTMLではファイル内の特定の位置へのリンクのためにname属性を使って

（誤りの例）

<a href="#foo">アンカーをクリックすると</a> .... <a name="foo">ここにジャンプする</a>

という記述をしていましたが、XHTMLではファイル内部の位置を示す属性はid 属性になりました。従って、ジャンプ先は<a id="foo"> となるわけですが、この id 属性をサポートしないブラウザもあるため、

（正しい例）

<a href="#foo">アンカーをクリックすると</a> .... <a name="foo" id="foo" >ここにジャンプする</a>という具合に、 name 属性と id 属性を同じ値で併記することが推奨されています（ id 属性そのものは、HTML 4.0から導入されています）。なお、XHTML1.1ではname 属性は廃止され、 id 属性のみでフラグメントを示します。

&はあらゆるところで&と記述するHTMLでも普通 & は&と記述することになっていますが、XHTMLの場合、その用法が徹底していて、たとえばCGIを呼び出すためのURLでも

（誤りの例）
<a href="/cgi-bin/myscript?name=kanzaki&score=100">

ではなく

（正しい例）
<a href="/cgi-bin/myscript?name=kanzaki& score=100">

属性の省略書式は使わないHTMLでは、属性の名前と値が同じ場合に、属性名を記述せずに

（誤りの例）
<input type="radio" name="bar"checked>

としていましたが、XHTMLではこれは認められず

（正しい例）
<input type="radio" name="bar"checked="

head要素内のスクリプトやスタイルシートの注意HTMLとは異なり、XHTMLにおいてはスタイルやスクリプトも #PCDATA （字句解析を受けるデータ）として定義されたため、< はタグの開始と見なされ、コメントした内容は無視されることになります。

たとえばJavascriptで数値の比較をするような式を記述していると、XHTMLではエラーになり、スタイルシートを古いブラウザから隠すために

（誤りの例）

のように記述していると、その定義は無視されてしまう可能性が高いとされています。解決策としては、外部ファイルにスタイルシートやスクリプトを記述することが推奨されています。

言語コードの指定に xml:lang 属性を用いるXMLでは言語コードの指定にxml:lang属性を用いるので、HTMLとの互換性のために lang 属性と合わせて記述します。

（例）
<p lang="fr" xml:lang="fr"> Bonjour, monsieur</p>

XHTML 1.1では lang 属性は廃止され、 xml:lang 属性のみを記述します。

要素の廃止・追加

上述のとおり、XHTML 1.1 ではStrict に相当するものしか認められなくなりましたので、XHTML 1.0 の Transitional と Frameset では使用可能だった以下の要素が廃止されました。

［廃止要素］

applet、basefont、center、dir、font、frame、frameset、i、iframe、isindex、menu、noframes、s、strike、u

また、XHTML 1.1 ではRuby Annotationに基づき、以下のルビ関連要素が追加されました。

［追加要素］

rb、rbc、rp、rt、rtc、ruby

属性の廃止

XHTML 1.1 では以下の属性が廃止されました。

［廃止属性］

（全要素）lang
                    （a要素）name、target
                    （area要素）target
                    （body要素）background、bgcolor、text、link、vlink、alink
                    （br要素）clear
                    （caption要素）align
                    （div要素）align
                    （h1～h6要素）align
                    （hr要素）align、noshade、size、width
                    （img要素）align、border、hspace、vspace
                    （input要素）align
                    （legent要素）align
                    （li要素）type、value:値
                    （link要素）target
                    （map要素）name
                    （ol要素）compact、start、type
                    （p要素）align
                    （pre要素）width
                    （script要素）language
                    （table要素）align、bgcolor
                    （td要素）bgcolor、height、nowrap、width
                    （th要素）bgcolor、height、nowrap、width
                    （tr要素）bgcolor
                    （ul要素）compact、type

XHTML のテンプレート

<?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" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="author" content="著者" />
<meta name="description" content="内容説明" />
<meta name="keywords" content="キーワード,キーワード" />
<link rev="Made" href="mailto:著者メールアドレス" />
<title>文書のタイトル</title>
</head>
<body>
<p>文書の内容</p>
</body>
</html>