XHTMLへの移行

年が改まり、従来使用していた「エーッチティーエムエル（HTNL）」記述から、XHTML記述への移行を始めました。

xhtmlとは

W3C Recommendation 26 January 2000の「1. XHTMLとは何か 」によれば
XHTML 1.0(eXtensible HyperText Markup Language)はXHTML系統のマークアップ言語の中の第１段階を踏み出したものである。
それはXML1.0[XML]へ移行する前段階として,、従来使用の３つのHTML 4.01（HTML 4.01 Transitional、html4.01/strict、HTML4.01 Frameset）ドキュメント・タイプの改良である。
それは、両方ともXML一致している内容のために言語として使用されるように意図されている。

即ち、従来使用していた html（HyperText Markup Language）と次世代に進化するであろうXML（eXtensible Markup Language）の合わさったもので、その中間に位置し、htmlからxmlへの移行がスムースに行はれるように配慮したものがxhtmlです。ですから、拡張子も[.html]を使用します。

XHTML 1.0 Strictを使用する

ところで、XHTML 1.0がW3Cから勧告された１６ヶ月後（(2001年5月31日）足早にXHTML 1.1が勧告されました。
XHTML 1.0で、HTML救済措置として、暫定的に含まれた「XHTML 1.0 Transitional」及び 「XHTML 1.0 Frameset」は外され、「XHTML 1.0 Strict」の改良型となりました。
この改革により、XHTML 1.0と違って、従来のHTMLとの互換性のために残されていたレイアウト的な[要素]は取り除かれ、すべて、スタイルシートの [属性]（それも外部スタイルシート推奨）での記述になります。
xhtmlへの移行を段階的に行うため、私たちにわかりやすい「XHTML 1.0 Strict」でやって行きたいと思います。

冒頭の宣言について

すべてのXHTML文書はXML宣言で開始する

<?xml version="1.0" encoding="Shift_JIS"?>
これは、XML1.0で処理することを宣言した構文で、ファイルの冒頭に宣言します。
文書の文字コードに「Shift_JIS」を用いる場合には、「encoding="Shift_JIS"」と 宣言する必要があります。
記述はすべて小文字ですが、文字コードに関しては大文字と小文字を区別しません。

XML宣言の後に、DOCTYPE 宣言と文書タイプ宣言の２つを宣言する

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
この宣言は W3C が制定した、どのバージョンのタグセット（タグの集合体）を使うのかを明らかに示さなければならないので、URIで指定されたXHTML1.0の「DTD文書」の場所を示しています。なお、大文字と小文字の区別があります。URIの省略は不可となっています。（DTD：Document Type Definition）

xmlns属性のXHTML名前空間を指定する

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
XHTML文書は XMLに適合した文書なので、XMLの名前空間を利用することができます。
使用する「タグの意味」が指定されている位置を参照することで、コンテンツがブラウザに整形できるわけです。
このように名前空間を指定することで<html>要素以下がXHTMLの要素として成立します。
htmlでは、lang 属性で言語指定がされていますが、XHTML でも「xml:lang="ja"」を付け加えています。xml:lang 属性は必須です

XHTMLの３つの公式バージョン

1.strict（厳密な）xhtml、２．transitional xhtml、３．frameset xhtml
がありますが、（２）は転換期のバージョン、（３）はフレームバージョンに対応しているわけですが、双方とも、W3C で推奨されない要素を使用しているため過度期のバージョンと言えます。

従来 head 間に記述したコメントの扱い

HTMLでは、<style type="text/css">〜 <!-- ・・・・・--></style>
とエンベッドスタイルシートを head 間に埋め込んでいましたが、XHTMLにおいてはスタイルシートは [#PCDATA（字句解析を受けるデータ）]として定義されたため、< はタグの開始と見なされ、コメントした内容は無視されることになります。

従来スタイルシートを非対応のブラウザから隠すために
<style type="text/css">
<!--
p {color:red}
-->
</style>
のように記述していましたが、XHTMLではその定義は無視されてしまう可能性があります。
解決策としては、外部に[.css]ファイルを作り「リンキングスタイルシート」方式をとることが推奨されています。（ちなみに、このページでもhead 間にスタイルの埋め込みはしておりません。）

その他の変更点

従来のHTMLのタグは使用できるのか

殆んどが使用できます。ですから、正しいhtml（html4.01 Strict仕様）を記述していたなら、転向は割合簡単にできるはずです。全くあたらしいものに挑戦するのでなく、従来のhtmlに少し手を加えると考えると楽になります。

今まで作ってきたHTMLファイルは使えるか

少し修正すれば使えます。それについて下記注意点があります。

XHTMLはすべて小文字で書く

HTMLでは要素および属性の記述に、大文字でも小文字でも良かったのですが、XHTMLでは、大文字と小文字が厳格に区別されます。即ちタグには「<HEAD>とか<TABLE>」等大文字は使えません。
「<head>や<table>」のように英数小文字のみ通用することになります。

終了タグの省略はできないことになりました

例えば、<p>タグですが、本来<p>〜</p>という形で内容をマークアップするものですが、</p>は省略しても差し支えありませんでした。というのは、次に、新しい「タグ」が現れると自動的に終了したからです。
しかしXHTML文書では、すべての省略が禁止されています。とにかく、必ず<p>〜</p>という形で使います。
その外に<li>〜</li>などが挙げられます。

空要素（エンプティ要素）の扱い方

空要素とは、終了タグを持たない要素を指し、下記が挙げられます。

猫の写真

空要素全体に言えることですが、「必ず最後の部分で半角スペースを置いた後に、スラッシュ 「 alt="猫の写真" /> のように記述します。

属性は必ずダブルクォーテーションで囲む

HTMLでも普段からきちんと付けている人は問題はないのですが。
従来属性の値が数字だけ、あるいはアルファベットだけの場合、引用符（ダブルクォーテーションで囲むこと）を省略できましたが、 XHTMLでは省略は許されません。
例えば、<hr width=376 />は不合格で、<hr width="376" />としなければなりません。

タグは必ず入れ子にする

HTMLではタグの終了の仕方が、たすき掛け状に交差していても大丈夫でしたが、XHTMLでは許されません。数学比例式でいう内項と外項のように、先ず内項を終了させ、次いで外項を終了させることです。例を挙げると、 <strong><span style="font-style: oblique;">ようこそ</strong></span>は、XHTMLでは駄目で、<strong><span style="font-style: oblique;">ようこそ</span></strong>としなければなりません。

旧 name 属性と新 id 属性を併記すると安全

HTMLでは、name 属性を使ってファイル内の特定の場所へリンクしたのですが、 XHTMLでは、id 属性を使うことになります。
「Another HTML-lint gateway」219番の指摘によりますと、 <TAG> には NAME 属性と ID 属性の両方を指定するようにしましょう。 となっていました。
アンカー名の指定は、NAME 属性ではなくID 属性で行なう方向にW3Cは移行させています。 XHTML1.0(J)では過渡的な措置として、どちらでもうまくいくように、両方を指定しておくように薦めています。ただし、同じ値を書かなければなりません。過渡的なものなので、XHTML1.1ではそのようなNAME属性は廃止されています。

即ち、下記の従来の形は使用出来ません。
<a name="siyo">XHTMLの仕様</a>

XHTMLではこのような形になります。
XHTMLの仕様左の項目へリンク移動したい場合
（送り手側）<a href="#siyo">XHTMLの仕様</a>と記述します。
（受け手側）<a id="siyo">XHTMLの仕様</a>となります。

ところで、現段階では、このid 属性に対応していないブラウザもあるようなので、 安全策としてname 属性とid 属性を併記するのが一般的なようです。
<a href="#suyo">XHTMLの仕様</a>　（送り手側）こちらは従来と変りありません。
（受け手側）<a name="siyo" id="siyo">XHTMLの仕様</a>
[name]属性か、[id]属性のどちらか一方が無視されて実行されます。

注釈：そもそも[id属性]には３っつの使用法があります。

  1. 要素に特定の識別子（id 値）を割り当て、その文書内で同じid 値を持つ要素が存在できないことを意味する。即ち１文書内で1箇所しか利用できないことです。
  2. ハイパーテキストのリンク先を定義する（ラベルを貼り付ける）
  3. 文書のスクリプトプログラムが文書をアドレス付けしたり操作したりするために文書の一部にラベルを貼り付ける

今後リンク先へジャンプするには、name 属性に替えて「２番目」のid 属性を使用し、ラベルを貼り付けることになったのです。（id 属性を使用すると、<a name="siyo">が、<id="siyo"> となり、アンカー要素[a]が不用となります。）

属性値は省略しない

例えば、ラジオボタンで最初からチェックを入れておきたいときに
HTMLでは、「 <input type="radio" checked> 」
と「checked="checked"」を省略していましたが、XHTMLでは、省略できません。 次のようにします。
<input type="radio" checked="checked" /> 閉じる「/」スラッシュも必要です。
上記記述による例：

[&]はあらゆるところで[&amp]と記述する

従来からHTMLでも&は&ampと記述することになっていましたが、XHTMLの場合、その用法が厳格になります。特に、CGIを呼び出すためのURL記述の場合要注意です。
（例えば）<a href="/cgi-bin・・・中の&・・・">は
　　　　　<a href="/cgi-bin・・・中の&anp・・・">と記述します。

始めてXHTMLに挑戦しての感想
上記のことを踏まえて実際に作ってみて、「Another HTML-lint gateway」という、「HTML文書の文法を採点するホームページ」の審査を受けながら訂正すべき所を教えてもらいながら、挑戦したいと思っております。
ちなみに、４〜５度修正後のこのページは８３点で「良くできました。」の採点となりました。

チェックの結果は以下のとおりです。 http://www.geocities.jp/cxnpp630/x_xhtml1.html を XHTML1.0 Strict としてチェックしました。
3個のエラーがありました。このHTMLは 83点です。タグが 22種類 94組使われています。文字コードは Shift JIS のようです。
先頭の数字はエラーのおおまかな重要度を 0〜9 で示しています(減点数ではありません)。少ない数字は軽く、9 になるほど致命的です。
減点2: line 4: <html> には lang 属性を指定するようにしましょう。 → 解説 119
減点5: line 7: <meta> に MSIE 用の属性 charset が指定されています。 → 解説 80
減点9: line 166: </html> の後にまだ何かテキストがあります。 → 解説 242
最後の減点９点は、ヤフーBBのgeosities（ホームページ無料レンタルスペース）による広告掲載が</html>以後に埋め込まれたためです。

トップへ戻る     スタイルシート目次へ戻る
　DTDを読んでみましょう へ戻る     XHTMLについて２ テーブル（表）の設定へ進む

inserted by FC2 system