Section 4 : HTML 4 との記法の違い(1)

 ここでは,XHTML 1.0 と HTML 4 との記法の違いをまとめていこう。

大文字と小文字の区別

 Section 2 および Section 3 でも述べたように,XML ではタグに書かれる要素名・属性名は大文字と小文字を区別し,XHTML 1.0 ではこれらに対して小文字を用いる。

 たとえば,次の記述は HTML 4 としては正しいが,XHTML 1.0 としては正しくない。

<P> 東京の地下鉄は,その複雑さでは世界に類を見ないであろう。これだけの地下鉄網があって,さらに<A HREF="http://www.tokyometro.go.jp">営団地下鉄</A>では半蔵門線の延伸,池袋から新宿へ抜ける営団 13 号線の工事が行われている。</P>

XHTML 1.0 として正しいものとするには,要素名・属性名を小文字で書いて,

<p> 東京の地下鉄は,その複雑さでは世界に類を見ないであろう。これだけの地下鉄網があって,さらに<a href="http://www.tokyometro.go.jp">営団地下鉄</a>では半蔵門線の延伸,池袋から新宿へ抜ける営団 13 号線の工事が行われている。</p>

 また,キーワードを与える属性値も,大文字と小文字を区別する。XHTML 1.0 では,これらの属性値は小文字で書く。

 16 進数で文字を参照する場合も,小文字を使う。たとえば,“ア”を参照するのは,HTML 4 では,“&30A2;”“&30a2;”のいずれでも構わないが,XHTML 1.0 を含めた XML では,“&30a2;”と参照しなければならない。

タグの省略

 XML では,タグの省略を許していない。HTML 4 では,タグの省略が許されている要素もあったが,XHTML は XML ベースであるから,タグの省略は許されない。特に,終了タグを省略することの多かった li 要素などは注意が必要である。

<p> <a href="http://www.kotsu.metro.tokyo.jp/">都営地下鉄</a>は,
<ul>
<li>浅草線(押上〜新橋〜西馬込)
<li>新宿線(新宿〜岩本町〜本八幡)
<li>三田線(西高島平〜巣鴨〜大手町〜目黒)
<li>大江戸線(光が丘〜大門〜蔵前〜飯田橋〜都庁前)
</ul>
<p>の 4 路線を営業している。大江戸線は 2000 年 12 月 12 日に全線開業し,都庁前を折り返し点とする“6 の字運転”を行っている。

は,HTML 4 としては正しいが XHTML としては誤りで,p 要素,li 要素の終了タグを書かなくてはならない。

<p> <a href="http://www.kotsu.metro.tokyo.jp/">都営地下鉄</a>は,</p>
<ul>
<li>浅草線(押上〜新橋〜西馬込)</li>
<li>新宿線(新宿〜岩本町〜本八幡)</li>
<li>三田線(西高島平〜巣鴨〜大手町〜目黒)</li>
<li>大江戸線(光が丘〜大門〜蔵前〜飯田橋〜都庁前)</li>
</ul>
<p>の 4 路線を営業している。大江戸線は 2000 年 12 月 12 日に全線開業し,都庁前を折り返し点とする“6 の字運転”を行っている。</p>

属性値の引用符

 HTML 4 では,属性値が“英数字,ハイフン,ピリオド,アンダースコア,コロンのみからなるとき”,それをくくる引用符を省略してよいことになっているが,XHTML を含めた XML では,引用符の省略はいかなる場合でも許されない

 したがって,次の例は XHTML としては正しくない。

<img src=omtsando.jpg alt="表参道駅では,ホームが銀座線と半蔵門線で方向別になっている。" width=640 height=480 />

次のように,すべての属性値を引用する必要がある。

<img src="omtsando.jpg" alt="表参道駅では,ホームが銀座線と半蔵門線で方向別になっている。" width="640" height="480" />

終了タグを取らない要素

 HTML には,終了タグを取らない要素(hr 要素,br 要素,img 要素など)があった。XHTML を含めた XML では,Section 2 で触れたように,これを“終了タグを書かない”として表すのではなく,“中身が空の要素”として表す(<hr></hr>)か,専用のタグ(<hr />)を用いて表す。

 ここで,HTML 4 との互換性を考慮すれば,終了タグを取らない要素は専用のタグを用いて表す。

<img src="omtsando.jpg" alt="表参道駅では,ホームが銀座線と半蔵門線で方向別になっている。" width="640" height="480">

これは,HTML 4 としては正しいが,XHTML 1.0 としては正しくない。これは,次のように書けばよい。

<img src="omtsando.jpg" alt="表参道駅では,ホームが銀座線と半蔵門線で方向別になっている。" width="640" height="480" />

前述のように,上の例は,<img ...></img>(内容は空にする)と書いても XHTML としては間違いではない。だが,HTML 4 との互換性の問題で,上のように書くと理解していただくとよいだろう。

script 要素と style 要素

 HTML 4 においては,半角不等号「<」「>」およびアンパサンド「&」を,script および style 要素中に“&lt;”などの文字参照を使わず書くことが可能であったが,XHTML 1.0 では許されない(文字参照を使用する必要がある)。文字参照を使用すると,従来の HTML UA でエラーが発生する恐れがある。

 XHTML 1.0 においてこれらの記号を文字参照なしで書くためには,要素の内容を CDATA セクションとして書かなくてはならない。

<script type="text/javascript">
<![CDATA[
  function judge(a, b) {
    if (a < 0 && b > 0) return 0 else return 1;
  }
]]>
</script>

しかしこれでは,従来の HTML UA がエラーを出す恐れもある。従来は,スクリプトまたはスタイルシートをすべてコメントアウトしてしまうという方法をとることが多かったが,この方法では,(新しい)XHTML UA がその部分を本当に“コメント”として取り除いてからスクリプト処理系またはスタイルシート処理系に渡してしまう(=結果,何も渡らない)ので,XHTML UA では正しく処理が行われない恐れがある。

 要するに,XHTML UA に正しく処理をさせるためには,スクリプトおよびスタイルシートをコメントアウトして記述しないほうがよい。また,そのときに,それらが不等号またはアンパサンドを含む場合は,文字参照か CDATA セクションとして記述しなければならない。しかしこれらは,従来の HTML UA で正しく動作しないことがある。これらを解決するには,スクリプトおよびスタイルシートを外部のファイルとして用意すればよい。これについては Section 6 で述べる。