HTMLとXHTMLの違い

HTMLとXHTML 1.0の違い

HTMLもXHTMLも,Webページを作るための言語です。XHTML(Extensible HyperText Markup Language)は,従来のHTML(HyperText Markup Language)と,構造化された情報を表すための新しい言語XML(Extensible Markup Language)の特徴を合わせ持つものです。

HTMLは,かなりいいかげんというか,書き方に自由度がありました。たとえば,HTML 4.01では

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<title>私のホームページ</title>
</head>
<body>
<p>工事中
</body>
</html>

のように書きました。この段階ですでに <p>工事中</p> の終了タグ </p> を省略しています。HTMLのバージョンを表す1行目も,昔は書きませんでした。さらに,終了タグはほとんどが省略できますし,開始タグも,あいまいさがなければ省略してもかまいませんでした。ですから,

<title>私のホームページ</title>
<p>工事中

だけでも問題なく動作しました。また,タグは大文字・小文字のどちらでもかまいませんでした。

これと同じことを,XHTML 1.0では次のように書きます。タグは大文字・小文字を区別しますので,必ずこの通りに(つまり,小文字で)書きます。

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="ja" xml:lang="ja">
<head>
<title>私のホームページ</title>
</head>
<body>
<p>工事中</p>
</body>
</html>

1行目のXML宣言 <?xml ...?> は,文字コード(正確にはエンコーディング)としてUTF-8またはUTF-16を使う場合に限り,省略できます。ただし,IE6はこれが理解できず,互換モードになってしまうというバグがあるので,当面は省略したほうがいいでしょう。

その次の,

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

は,XHTML 1.0 Strictというバージョンを使うことを表す決まり文句です。XHTML 1.0には他にTransitional,Framesetというバージョンがあります(XHTML 1.1ではStrictに相当するものしかありません)。TransitionalはCSSを使わない流儀を温存するのでここでは使いませんが,Strictで一つ困る点があるとすれば,JavaScriptを使わずに新しい窓を開くことができないことでしょうか。Transitionalなら <a href="..." target="_blank" title="新しい窓を開きます">...</a> で新しい窓を開くリンクができます(title="..." はユーザを驚かせないための説明表示です)。Transitionalな場合は頭に次のように書きます:

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

新しいHTML 5の場合は単に次のように書くことになります:

<!DOCTYPE html>

これはIE6以上のブラウザで問題なく使えますが,FirefoxのValidatorアドオンは未対応のようです(DOCTYPE宣言についてはここが参考になります)。

次の,

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

は,XML名前空間(namespace)の宣言と,言語が日本語(ja)であることを表しています。今は過渡期なのでHTMLとしての言語とXMLとしての言語を両方指定しますが,XHTML 1.1では xml:lang だけになります。

XHTMLでは <p> に対する </p> のような終了タグが省略できません。HTMLで <hr> のような終了タグのないものは,XHTMLでは <hr /> のように書きます。

なお,ブラウザによっては <?xml version="1.0" encoding="..."?> の指定をしてもエンコーディングの判定を間違うことがあるようです。そこで,HTMLのときと同様に,<head> のすぐ後に

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

のように書いておくのが当面は安全です。ここで <meta ...> も終了タグがないのでXHTMLでは <meta ... /> のように書きます。

XHTMLでは,デザイン的なものはすべてスタイルシートで表します。スタイルシート style.css を読み込む部分も含めて,XHTMLの雛形を示しておきます:

<!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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>私のホームページ</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>工事中</p>
</body>
</html>

XHTML 1.0とXHTML 1.1の違い

このページはXHTML 1.1で書かれています。W3Cの Validator でチェックすると,正しいXHTML 1.1のページだと言われます。

XHTML 1.1からは,XHTML 1.1と違って,MIME型を text/html で送ることができなくなると言われていましたが,W3C本家の XHTML 1.1 のサイトはXHTML 1.1で書かれているにもかかわらず,ずっと text/html で送られていました。どういうことかと思っていましたら,2007年の改訂で,結局どちらでもいいということになったようです。XHTML 1.1 - Conformance Definition には次のように書かれています:

XHTML 1.1 documents SHOULD be labeled with the Internet Media Type text/html as defined in [RFC2854] or application/xhtml+xml as defined in [RFC3236].

雛形のページは次のようになります(<?xml version="1.0" encoding="UTF-8"?> は略しました):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>私のホームページ</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>工事中</p>
</body>
</html>

1行目の書き方が異なるほか,2行目で lang がなくなって xml:lang に一本化されました(text/html でいいなら lang があっても良さそうに思うのですが)。これ以外は,この雛形に限れば,XHTML 1.0 Strictとまったく同じです。

このほか,リンク のページでも書きましたが,XHTML 1.0では <a name="..." id="..."> と書けたものが,XHTML 1.1では name が使えず,古いブラウザでページ内リンクを実現できなくなってしまいます。

その代わりに,ルビ(振り仮名)を振るための Ruby Annotation が追加されました。IEのほか,Firefoxでもアドオンで対応しています(XHTML 1.1でなくても使えます)。対応しないブラウザでは括弧付きで表示させることができます:

例:尤度ゆうど

<ruby><rb>尤度</rb><rp>(</rp><rt>ゆうど</rt><rp>)</rp></ruby>

HTML 5では <rb></rb> はなくなるようです:

<ruby>尤度<rp>(</rp><rt>ゆうど</rt><rp>)</rp></ruby>

結局何を使えばいいか

現在の主流はHTML 4ベースのXHTMLですが,その先には現在作業中のHTML 5が待っています。おそらく現在のノウハウを活かしてXHTMLでベースをHTML 4からHTML 5に少しずつ上げていくことになるでしょう。


奥村晴彦

Last modified: 2011-08-02 21:48:04