XHTML1.0の変更点

Updated / Published

XHTML1.0 は、HTML から移行することを第一とした仕様なので、要素や属性は HTML4 の規格で定義されたままです。つまり、XHTML1.0 は HTML と XHTML の間の架け橋となる仕様でしかないため、HTML4.01 で作成した経験があれば、特別新しいことはないので、XHTML1.0 で文書を作成するのに何も難しいことはありません。既にある HTML文書を XML のルールに修正するだけです。ここでは HTML4 から XHTML1.0 への移行に必要な手順を解説します。

XML文書であることを宣言する

まず、文書の1行目には、その文書が XML文章であることを宣言します。これは、今後増えていくであろう XML の他のバージョンとの区別をつけ、混乱を避けるために、その文書の規格がどのバージョンに属するかの XML のバージョンを記述します。

<?xml version="1.0"?>

XML はデフォルトの文字コードに Unicode の "UTF-8"、または "UTF-16" が設定されていますが、それ以外の文字コードを用いる場合には、サーバ設定ファイルでHTTPレスポンスヘッダ内に文字コード情報を設定している場合を除き、必ず当該文書で使う文字コードを XML宣言に追加指定しなければなりません。

なお、"UTF-8"、または "UTF-16" の文字コードを使用する場合には XML宣言自体を省略することも可能です。ただし、XML宣言は必須ではありませんが、今後増えていくバージョンとの区別をつけるためにも記述しておくことが強く推奨されています。しかし、Internet Explorer 6 では XML宣言を記述することで強制的にレンダリングモードを仕様に準拠していない独自のレンダリングを行う後方互換モードに切り替えてしまうバグがあるので注意してください。レンダリングモードの切り替わりについての詳細は !DOCTYPE スイッチを参照してください。

エンコード(符号化)に用いる文字コードの指定には、上記の XML のバージョン指定に encoding属性を与えます。

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

XML宣言を記述しており encoding属性の指定がない場合は、デフォルトの "UTF-8"、または "UTF-16" が文字コードとして適用されます。XHTML文書の文字コードにも "Shift_JIS", "EUC-JP", "UTF-8" のいずれかを使用するのが一般的です。また、文字コードはサイト内にある全文書で統一させるようにしましょう。

DOCTYPE宣言(文書型宣言)

バージョン毎に、それぞれの文書型(Document Type)が用意されており、このバージョンでは、どのような要素や属性、属性値を指定することができるということが定義されていることを文書型定義(DTD)と呼びます。そして、制作者は宣言した文書型に応じて、定義されている仕様(ルール)に沿った文書を作成しなければいけません。文書型定義(DTD)を宣言することを DOCTYPE宣言(文章型宣言)と呼び、その文書が XHTML のどのバージョン(規格)で記述されているかを宣言します。

XHTML1.0厳密型DTD

W3C の仕様で「推奨しない」とされる要素や属性、さらにフレーム機能用の内容を使用しない。

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

XHTML1.0移行型DTD

厳密型DTDに加えて、W3C の仕様で「推奨しない」とされる要素や属性も使用する。

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

XHTML1.0フレーム設定型DTD

移行型DTDに加えて、フレーム機能用の内容も使用する。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

これらは、それぞれ HTML4.01 の厳密型DTD, 移行型DTD, フレーム設定型DTD を受け継いだものです。今後のバージョン移行が速やかに行えるように厳密型DTD に準拠した内容で作成することが望ましいです。ただし、HTML の仕様をよく理解していないという方は、移行型DTD を選択されるのが無難です。XHTML文書を処理する視覚環境の UA であれば宣言された文書型定義に従って表示(レンダリング)方法が異なり、たとえば、厳密型(strict バリエーション)DTD を記述した場合、XHTML1.0 の仕様において「非推奨(廃止予定)・廃止」とされる古い要素や属性を記述していた部分をすべてはじきだして表示することが期待されます。

xmlns属性と xml:lang属性の追加

XHTML1.0 では html要素 に xmlns属性で、XML ネームスペース(名前空間)を指定します。XHTML1.0 には "http://www.w3.org/1999/xhtml" のネームスペースが与えれているので、これを値として指定します。続いて文書で使用する言語コードをHTML互換の lang属性と、新しく追加された xml:lang属性の両方に同じ値で設定します。言語コードを示すのに両方指定する必要があるのは、xml:lang属性を参照できない UA との後方互換を考慮したものです。属性値となる言語コードとは、日本語であれば "ja"、英語であれば "en"、中国語であれば "zh" のように半角アルファベット2文字で言語の種類を表します。

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

meta http-equiv宣言

XHTML1.0 では XML宣言の encoding属性に重ねて、head要素内に設定するUAへの補助情報において文字コードの指定をします。これは UA が文書を読み取る際、ソースを上から順に解析していくので、文書の先頭に記述した XML宣言の部分に指定した文字コードを優先するはずですが、UA によっては XML宣言の encoding属性で指定された文字コードを正常に認識できないこともあるので、XHTML に互換性のない HTML互換の UA においても文字化けを防ぐために XML宣言で指定した文字コードと同じ文字コードを指定しておくようにします。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

なお、最後にスラッシュ(/)がついていますが、これは終了タグは省略できないの項目で説明します。

関連

終了タグは省略できない

<ul><li>...<li></ul> → <ul><li>...</li><li>...</li></ul>
<br> → <br />, <br></br>

HTML では li要素, p要素, dt要素, dd要素, tr要素, th要素, td要素などの特定の要素については終了タグを省略することが可能で、html要素, head要素, body要素に至っては開始タグも終了タグもその記述自体の省略が可能でした。特に li要素等のリスト要素はタグの記述量を減らす習慣的に省略されてきた傾向があります。しかし、厳格な書式が求められる XML では、すべての要素について終了タグが必須となっています。

area要素, br要素, hr要素, img要素, input要素, meta要素などの内容をもたない空要素は終了タグ自体がありませんが、これらの要素にも必ず終了タグをつけなければいけません。内容をもたない空要素についての終了タグのつけ方は、要素型名の後に半角スペースを空けてから続けてスラッシュ(/)をつけるか、"<br></br>" のように終了タグをつけます。UA の対応状況から要素型名の後に半角スペースを空けてから続けてスラッシュ(/)をつけるのが一般的です。

要素・属性の大文字と小文字を区別する

<P>HTMLでは、要素・属性を大文字で記述しても良い</P>
↓
<p>XHTMLでは、要素・属性をすべて小文字で記述する</p>

HTMLでは大文字・小文字どちらでも記述してもよかったのですが、XML では大文字と小文字を厳格に区別する(case-sensitive)ので、XHTML文書の要素・属性はすべて小文字で記述しなければいけません。

属性値は引用符でくくる

<table border="5">
<tr><td>
<img src="sample.gif" width="50" height="50" alt="..." />
</td><tr></table>

HTML4 の規格においては、英数字(a-z|A-Z|0-9)とピリオド(.)、コロン(:)、アンダースコア(_)、ハイフン(-)以外の文字を含む場合にのみ属性値を必ずダブルクォーテーション(")、もしくはシングルクォーテーション(')の引用符で囲まなくてはならないとだけ定められていたので、場合によっては引用符の省略化を可能にしましたが、XHTML では全ての属性値を必ずダブルクォーテーション(")、もしくはシングルクォーテーション(')の引用符でくくらなければなりません。慣習上、ダブルクォーテーション(")の方を使用するのが一般的です。

属性の最小化(略記)の禁止

<input type="radio" checked="checked" />
<option value="..." selected="selected">...</option>

checked属性, selected属性, compact属性, nowrap属性, disabled属性, noresize属性などの属性には属性値がありませんが、XHTML では必ず属性値を記述する必要があります。属性値の記述方法は、属性名をそのまま属性値として繰り返し記述するだけです。

name属性から id属性へ

HTML4.01の場合: <a name="top">
XHTML1.0の場合: <a id="top" name="top">

HTML では要素の識別子として name属性、または id属性を指定できました。しかし、XHTML1.0 では name属性は廃止予定で、name属性に代わって id属性を指定します。name属性の指定は、a要素, applet要素, frame要素, form要素, iframe要素, img要素, map要素の特定の要素型のみに限られていましたが、XHTML1.0 では id属性はすべての要素型に指定するこができます。なお、id属性を参照できない UA との後方互換のために a要素, applet要素, frame要素, form要素, iframe要素, img要素, map要素については name属性と id属性の両方を同じ値で設定することが認められています(XHTML1.0移行型DTD では frame要素は除かれ、XHTML1.0厳密型DTD では a要素と map要素の2つにしか認められていません)。a要素に name属性を指定して使っていた目的地アンカー(終点アンカー)も、わざわざ a要素を使う必要はなく、他の要素に id属性を指定することで目的地アンカーとして機能します(Internet Explorer 4, Netscape 6 より対応)。

関連

script要素と style要素

HTML4 の規格では、クライアントサイド・スクリプトを組み込む script要素やスタイルシートを組み込む style要素に対応していない UA のために、スクリプトコードやスタイルシートの内容を "<!-- -->" のコメント宣言を使った内容のエスケープが行えましたが、XHTML ではこの旧来のテクニックは使用できなくなりました。

HTML では script要素と style要素の内容は解析されない文字データ(Character DATA)だったのですが、XHTML では script要素と style要素の内容は解析対象となる文字データ (Processed Character DATA) になったため、マークアップ区切り文字は意味を持ち、文字実体参照などは展開されます。

たとえば、スクリプトやスタイルシートの内容に &lt;&amp; があると実体として、そのまま <, & のように記号として認識してしまいます。区切り子があると場合によってはマークアップとして認識されることもあるので、これを回避するために XHTML では CDATAセクションを使うことで解析されない文字データ(Character DATA)にすることが可能です。"<![CDATA[ ]>" の形式で用います。

ただし、CDATAセクションをサポートしていないUAへの後方互換のため、XHTML ではスタイルシートの参照に style要素を、スクリプトコードの評価にscript要素で直接記述するのではなく、スタイルシートやスクリプトコードを記述したファイルを別に用意して、外部ファイルとして参照させる手法が推奨されています。なお、HTML においては後方互換のためにコメント・アウトする手法は常套手段とされてきましたが、script要素には Netscape Navigater 2.0, Internet Explorer 3.0 より対応、style要素には Netscape Navigater 4.0, Internet Explorer 4.0 より対応していることから、今となっては script要素や style要素に対応していないような環境で閲覧しているユーザは皆無なので、いちいちスクリプトコードやスタイルシートをエスケープさせる必要もありません。

もちろん機能を持たない単なるコメントについては、従来通りの「<!--」と「-->」を用いて、"<!-- -->" の形式のコメント宣言を使って、コメント・アウトを行うことが可能です。ただ、これを XHTML では PCDATA として扱う script要素や style要素の中で使うと、UAが本当に仕様通りに解釈してしまうとスクリプトコードやスタイルシートを単なるコメントとして扱ってしまい、無効化してしまうということです。

関連

内容モデルの禁止事項

XHTML では下記の要素は、自身の要素内に含むことができない禁止事項となっている要素があります。

a要素
他の a要素を含んではならない
button要素
a要素, button要素, fieldset要素, form要素, iframe要素, input要素, isindex要素, label要素, select要素, textarea要素を含んではならない
form要素
他の form要素を含んではならない
label要素
他の label要素を含んではならない
pre要素
文字の幅を一定に揃えた等幅フォント(固定幅フォント)を確保するために画像などを埋め込んだり、フォントのサイズを変えることを目的とした applet要素, basefont要素, big要素, font要素, img要素, object要素, small要素, sub要素, sup要素を含んではならない
関連