XHTML入門

トップ > アラカルト > XHTML入門

XHTMLとは?

XHTML(eXtensible HyperText Markup Language)は、HTML を XML(eXtensible Markup Language)の仕様に準拠するように再定義したものです。HTML と XML は共に SGML(Standard Generalsed Markup Language)をベースとしていますが、XML が SGML の正統なサブセットであるのに対し、HTML は SGML の亜流とも言えます。そこで、亜流の HTML を正統派の XML に従った形式に再定義したものが XHTML です。

 SGML
1986年
  ├──────→ HTML
  ├→ XML        1989年
  │  1998年        │
  │   ├→ XHTML ←┤
  │   │   2000年  │
  ↓   ↓    ↓     ↓

XHTML1.0 の記述例

以下に、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" />
<title>XHTML入門</title>
</head>
<body>
<h1>XHTMLとは</h1>
<p>XHTMLとは・・・</p>
</body>
</html>

最初の行には <?xml ...> で XML宣言を記述します。Shift_JIS の部分には使用する文字コードを Shift_JIS(シフトJIS)、euc-jp(EUC)、iso-2022-jp(JISコード)、UTF-8(Unicode:UTF-8)などの中から指定してください。

次の行では、<!DOCTYPE ...> で XHTML のバージョンを記述します。

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

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

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

XHTML 1.1の場合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic 1.0の場合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

<html> タグには、xmlns で、XHTML が使用する名前空間を指定します。現在の XHTML ではいずれのバージョンも http://www.w3.org/1999/xhtml を指定してください。ja の部分には言語コードを指定してください。言語コードには ja(日本)、en(英語)、ko(韓国語)、zh(中国語)などがあります。

<meta> で Content-Type を指定する場合は、MIME タイプとして text/html、application/xhtml+xml、application/xml、text/xml のいずれかを指定します。application/xhtml+xml を使用することが推奨されていますが、古いブラウザとの互換性を考慮し、現在ではまだ text/html を指定するケースが多いようです。

HTML4.0 と XHTML1.0 の相違点

HTML4.0(HTML4.01)と、XHTML1.0 の主な相違点について説明します。

◆ タグ名や属性名はすべて小文字で記述する

HTML では大文字でも小文字でもどちらでも構いませんでしたが、XHTML では必ず小文字で記述します。

○ <p>タグはすべて小文字にします。</p>
× <P>タグはすべて小文字にします。</P>
◆ タグを省略してはならない

HTML では </p> や </li> など、終了タグを省略かのうなものがいくつかありましたが、XHTML では省略は許されません。

○ <p>終了タグを省略してはいけません。</p>
× <p>終了タグを省略してはいけません。

また、HTML では <body> や <head> などは開始タグも終了タグも省略してよいと定義されていましたが、XHTML では開始タグの省略も許されません。

◆ 終了タグが無いものは、/> で終わる

<br>、<hr> など終了タグが無いものは <br />、<hr /> のように記述します。XHTML に対応していない古いブラウザとの互換性を考慮して、/> の前にはひとつのスペースを空けることが推奨されています。

○ <img src="panda.gif" alt="panda" /> <br /> <hr />
× <img src="panda.gif" alt="panda"> <br> <hr>
◆ 属性値はすべて "..." で囲む

英字のみや、数値のみの属性であっても、属性値を "..." または '...' で囲む必要があります。

○ <img src="xx.gif" alt="xx" width="100" height="100" />
× <img src="xx.gif" alt="xx" width=100 height=100 />
◆ 属性は必ず「属性名=属性値」の形式で記述する

HTML では、checked や nowrap など、属性値(正確には属性名)が省略されることがありましたが、XHTML では必ず属性値を指定する必要があります。

○ <input type="checkbox" checked="checked" />
× <input type="checkbox" checked />
◆ 属性値の空白は &nbsp; と記述する

属性値の最初と最後の空白文字は削除され、途中に現れるひとつ以上の空白はひとつの空白に置きかえられます。属性値の中に空白を記述したい場合は、&nbsp; を使用します。ただし、属性値の &nbsp; には対応していないブラウザもまだ多いようです。

○ <img src="xx.gif" alt="You and ...&nbsp;&nbsp;&nbsp;me" />
△ <img src="xx.gif" alt="You and ...   me" />
◆ 属性値の & は &amp; と記述する

CGI 呼び出しの URL など、すべての属性値で、& を &amp; と記述しなくてはなりません。ただし、これも、対応していないブラウザが多いため、ブラウザが対応してくれるまでは & と記述しておいた方が無難そうです。

○ <a href="xxx.cgi?NAME=tanaka&amp;AGE=26">...
× <a href="xxx.cgi?NAME=tanaka&AGE=26">...
◆ スクリプトやスタイルシートの禁止文字

スクリプトやスタイルシートなど、XHTML のコメントとして扱われる部分に「<」、「&」、「]]>」、「--」を含む場合は、外部ファイルを用いることとなっています。

○ <script type="text/javascript" src="xxx.js"></script>
× <script type="text/javascript">
   <!--
     :
   if (num < 5) { line--; }
     :
   // -->
   </script>
◆ name 属性と id 属性

name 属性は廃止される予定です。name 属性の代わりに id 属性を用いますが、当面は互換性のために両方を記述するのが無難そうです。

○ <a name="hehe" id="hehe">...</a>
△ <a name="hehe">...</a>
△ <a id="hehe">...</a>
◆ TBODY の省略

HTML4.01 では TABLE要素の直下に TR要素を記述することはできず、下記の例では <tbody> と </tbody> が省略されていると見なされました。つまり、要素の親子関係は TABLE → TBODY → TR → TD となります。XHTML では、TABLE要素の直下に TR要素を記述可能となったため、<tbody> が省略されているとは見なされず、親子関係は TABLE → TR → TD となります。

<table>
   ← ここに <tbody> が、
<tr><td>AAA</td></tr>
   ← ここに </tbody> が省略されているとみ見なされる。
</table>

見た目にはそれほど影響はありませんが、JavaScript、DOM を用いて各要素にアクセスする際には注意が必要となります。

しかし、こうした影響を考慮してか、Internet Explorer 6.0 や Netscape 7.0 などのブラウザでは、XHTML の宣言を行っていても、TABLE → TBODY → TR → TD と解釈しているようです。

◆ その他

まだ細かな比較は行っていないのですが、上記の TBODY の他にも、HTML4.01 にくらべて仕様が変更されている部分があるかもしれません。

XHTML1.1 と XHTML1.0 の相違点

XHTML1.0 は、HTML4.01 を XML にあわせて書き直したものですが、XHTML1.1 では、もっと大きな変更を行っています。

◆ deprecated な要素やタグを廃止

Strict、Transitional、Frameset というカテゴリは無くなり、Strict のみとなりました。つまり、<font> や <center> など、HTML4.01 で deprecated と指定されていた要素や属性が完全に廃止されました。

◆ モジュール化

要素や属性の定義を、構造モジュール(html, head, title, body)、リストモジュール(dl, dt, dd, ol, ul, li)、テーブルモジュール(caption, table, td, th, tr, col, colgroup, tbody, thead, tfoot)など、いくつかのモジュールに分割し、ブラウザが一部のモジュールのみをサポートすることを許可しました。

モジュールは、Modularization of XHTML という XHTML1.1 とは別の文書で定義されています。この中には、レガシーモジュールとして、font や center などの要素も定義されていますが、XHTML1.1 ではレガシーモジュールを IGNORE(無視)するように宣言してたりしますので、XHTML1.1 でどの要素がサポートされているのかを調べるには、両方の文書を参照する必要があります。

◆ その他の変更点

XHTMLの普及率

無作為に抽出した有名サイト(Google で "A" を検索した際の上位 30サイト)で調べたところ、XHTML を使用しているのはまだ僅か 1サイト(3%)でした。HTML の次世代規格として 2000年1月に XHTML が勧告されてほぼ 3年が経過するのですが、XHTML に移行する大きなメリットが無いためか、まだ、あまり普及しているとは言えないというのが現状のようです。

ちなみに、多少誤りがあるものの HTML 3.2/4.0/4.01 などの勧告仕様に従っているのが 3サイト(10%)、DOCTYPE宣言はあるもののブラウザ独自属性などを使用しているのが 7サイト(23%)、DOCTYPE宣言を記述せず、自由な制約の HTML を用いているのが、Yahoo、Microsoft、Netscape、Adobe、NCSA、Amazon.com などの有名サイトを含む 19サイト(63%)でした。(2003年1月調べ)

関連リンク


Copyright (C) 2003 杜甫々
初版:2003年1月12日
http://www.tohoho-web.com/ex/xhtml.htm