06 July 2008

XHTML準拠

XHTML制定以後、大企業のホームページよりXHTMLの準拠が始まり、最近では中小企業のホームページに至るまでXHTML準拠が言われだしている。

でもね、大手企業や官公庁を含め、いまだに汚らしいHTML、<table> タグを猛烈に入れ子にしたものでデザインを構築しているようなサイトが多くありますね…

今回、某サイトをXHTML化してくれ、それも数日以内にというオーダーを受けて、何か監査でもあるのかなと思いつつ、最低限のXHTML化したときのメモをここに貼り付けときます。 (今後の参考にもなるし…)

HTMLファイルの先頭にはXML名前空間宣言 (XML規格の厳密適合では必要。あっても害にならないので、通常は付けておきます)。なお、IE6では、この宣言が存在すると後方互換モードというのになるらしく、CSSをまともに解釈してくれなくなる。IE6でも表示させたい場合は、XML名前空間宣言はしないほうがよいらしい… (そもそも、標準規格にわざと準拠しないマイクロソフトOSは切り捨ててもいいような気がしますが…)
文字のエンコード指定は、Shift_JIS 、 UTF-8 など、サーバで使用している文字コードを代入します。

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

その次には文書型宣言

XHTML 1.0 では次の3種類 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 では次の1種類 (strict相当のみ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

顧客が特に望まなければ、XHTML 1.0 Transitional が最も楽です。 Strict にすると、HTMLの各種タグから「よく使われる属性」が削除されてCSS化やjavascript化を余儀なくされます。工数が増えます w

次に <html> セクションの始まりも修正します。

XHTML 1.0 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> XHTML 1.1 ではlang属性が認められない <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

<head>セクションに存在するMIMEタイプでの文字コード宣言はHTML4.01でも存在していたが、XHTML 1.1 では認められなくなった。 (XML名前空間宣言で文字エンコードは解決済みという立場)

ただし、XMLを関知しないブラウザや、作法の悪いIEなどでは文字化けなどが起こるので、 XHTML 1.0 の場合は指定しておくのが通例らしい。 また、規格どおりの application/xhtml+xml 属性ではなく、従前の text/html 属性である点も、XML非感知への対応といえるようだ)

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

続いて本文の書き換え

(1) タグ名、属性名は全て小文字
   依然として、大文字でタグ名を書いている変なサイトもあります

(2) 属性値は引用符で囲む
   案外忘れがちです

× <font color=red>文字列</font> <font color="red">文字列</font> × <img src="a.png" width=100> <img src="a.png" width="100">

(3) 終了タグが無いものは、そのタグの末尾で閉じる

× <br> <br /> × <img src="a.png"> <img src="a.png" />

(4) ページ内のブックマーク(name)は、id 属性に置き換え

<a href="#test">ジャンプする</a> × <a name="test"></a> <a id="test"></a> <a name="test" id="test"></a>

(5) 終了タグは省略しない

× <li>項目名 <li>項目名</li>

(6) リストのインデント調整のため <ul> などを省略しない
   インデント調整は、スタイルシートで行う

× <li>項目名</li> <ul style="margin:0px; padding:0px;> <li>項目名</li> </ul>


(7) Strict XHTML では <u> や <b> はスタイルシートで実現する

× <u>文字列</u> <font style="text-decoration: underline;">文字列</font>

(8) Strict XHTML では、<a> で target 属性は使えない
   XHTMLの改正があり、target属性が復活したそうだが、これまでは javascriptで実装するという方針だった。

まあ、いろいろありますが、HTML4.01に準拠したサイトなら、簡単に書き換え作業は出来ます。

書き換え後は、W3Cのバリデータでチェックしてから、その画面コピーと共に納品というのも忘れてはならないポイントです。 顧客がWebにアップロードした時にファイルを壊したりして、XHTML準拠でなくなったとか言うクレームが出た場合でも、納品前検査では合格していたといえるわけです。

※ Movable Type 3 など、古いWebソフトはアップデートしないとXHTML準拠は出来ないのか。
という質問をいただきましたが、このサイトもMT3.33で作成していますが、XHTML準拠は可能です。標準で付属しているテンプレートをXHTML準拠になるように書き換えれば、Webプログラム自体は変更する必要性はありません。(変更に伴う社員教育費は、無駄)

ちなみに、主要ホームページの状況はというと…

マイクロソフト http://www.microsoft.com/ja/jp/default.aspx
  HTML 4.01 : 多数のエラー有り w
IBM http://www.ibm.com/jp/
  XHTML 1.0 : 合格(Strictで合格!)
産業の親玉官庁、経済産業省 http://www.meti.go.jp/
  HTML 4.01 : 若干エラー有り
情報通信の親玉官庁、総務省 http://www.soumu.go.jp/
  XHTML 1.0 : ほぼ準拠 (コメントを日本語で書くから、エラーが発生中)
東京都庁 http://www.metro.tokyo.jp/
  HTML 4.01 : 若干エラー有り

面白いのは、日本のお役所はトップページは優秀(外注してちゃんと作成しているのだろう)なのだが、実際のコンテンツがボロボロというところ。例えば、東京都の光化学スモッグ注意報ページ(http://www.ox.kankyo.metro.tokyo.jp/index.htm) は、W3Cのバリデータが「何のファイルか理解できません」という規格準拠以前のエラーとなる。 (DOCTYPE すら書かれていない)

トップページだけ規格準拠、操作性の統一を図っても、内部のページがボロボロでは意味無いでしょう。社員に規格準拠したXHTML書かせる教育するよりは、外注してホームページの作成やメンテナンスをしてもらうべきでしょうね。 (コードの修正レベルなら、1画面で5000円くらい。PhotoShopデータから画面を起こすなら1画面20000円くらい。というのが相場らしいです)

一応、本日の項目はXHTMLに準拠させています…
Valid XHTML 1.0 Transitional