remove
powerd by nog twitter

XHTML に改造してみる

ウェブサイト構築のヒント集 > 「XHTML に改造してみる」

HTML との違いは?

次世代はコレが来る! と、巷で囁かれている XHTML ですが、イマイチどこが HTML と違うのか???...。 そこで実験的にこの階層(ウェブサイト構築のヒント集)では XHTML によってソースを記述してみたのです。 勝手な妄想では XHTML だとものすごいコトになるのでは? と、思っていたのですが特に「何がどう」というコトはありませんでした。

ウェブ上には XHTML に関する説明がいくらでもあり、それらを参考にさせてもらったのですがイマイチ的を得ませんでした。 いくら読んでも XHTML というモノの輪郭があやふやな感じでしか結べませんでした(つまりは雲の様なやつであり)。 結局、分かったのは HTML を厳密に書いていれば(XHTMLへの移行は)たいして難しくないというコトくらいです。

理想主義的な W3C は常に次世代のニューフェイスがもたらす発達を考慮して仕様を発表しています。 誤解を恐れずに数時間で得た知識を総括するならば、XHTML とは次のようなモノです。 独自拡張の蔓延とブラウザの実装具合のバラツキによって生じた HTML の混乱を収め、 さらには携帯端末などへの多岐に渡るメディア対応も満たすものとして、 次世代の次世代による次世代の為のマークアップ方式である。

'04年現在、XHTML の普及度はそれほどではありません。 それは、XHTML にしなければならないメリットがそれほどでもないから、とも言われています。


構造改革

実際に、HTML4.01 Strict で書かれた HTMLファイルを XHTML に変換してみたワケです。 右も左も分からないので複数の解説サイトを参照しつつ、Another HTML-lint(石野氏作)による減点チェックを繰り返し行いました。 XHTML1.1 が最新のようですが、とりあえず XHTML1.0 に変換しました。 ファイル内文書の主な変更点は以下のようなものでした。

head より上の記述

<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">

ファイルの行頭は上記のように記しました。 XHTML1.0 かつ文字コード「Shift_JIS」であれば、上記のようにすればいいらしいです。 "xml" という記述が出てきますが、これに関しては他の詳しいサイトをご参照ください。 HTML にせよ XML にせよ、ML はマークアップ・ランゲッジ(記号付け言語 / 論理構造付け言語)の意味であり共通しています。

何をもって記号付けするのかというと、<p> であったり <strong> であったりするワケであり、 この根本的なトコロは HTML、XHTML の共通項です。 ですから、body 部分に関しての記述上の差異はほとんどありません。

head 内の記述(meta と link)

<head>
  <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />

  link要素の記述

行頭の文書型宣言などはともかくとして、 meta要素のように「要素」と名の付くものであり、開始と終了の対構造(<p>...</p> など)では無い 空要素は上記のように記述します。 他にも <img src="..." />、 <br />、<hr /> などの手直しが必要となります。

link要素に関しては他の詳しいサイトをご参照ください。

CSS と JavaScript は全て外部ファイル参照にした

<style type="text/css">
<!--

a { 
   white-space: nowrap;
   background-color: white
}

-->
</style>

HTML では head内に上記のような記述をして CSS の指定を行います。 <!−−中身をコメント扱い−−>にしているのは、CSS 未対応の場合に中の記述を画面に表示させない為の防御策です。

しかし、XHTML では <script> や <style> 内に以下の文字を使用してはなりません。

  < 
  & 
  ]]> 
  --

このような理由から CSS や JavaScript を使用する場合は link要素を用いて外部ファイル参照にしておく必要があります。 これは HTMLファイル内には HTMLだけを組み込み、後から拡張された CSS や JavaScript などを (別ファイルに)切り離す意図があるからだと思われます。

拡張 この方式であれば、HTMLファイル内にはテキストと論理構造を示すマークアップだけが存在するコトになります。 そして、別ファイルからの装飾や動的プログラムを受け取るコトによって画面表示を革新していくコトが可能となります。 つまり、将来的に新しい技術が開発されても外部ファイルとのリンクによって簡単に対応するコトが可能となるのです。

タグ内の文字は全て小文字に統一

HTML では <img SRC="image.gif" Alt="模式図"> のようにタグ内に用いる英文字は大文字・小文字のどちらでも構わなかった のですが、XHTML では全て小文字に統一する必要があります。 また大文字・小文字を区別するので、id="DOC" と id="doc" では別個の認識となります。

引用符や終了タグを省略しない

XHTML では <img SRC="image.gif" Alt="模式図" width="200" height="100"> のように引用符(')(")を 省略せずに記述する必要があります。 省略しないといえば、以下のように閉じタグを必ず記述する必要があります。

<ul>
<li>例えば</li>
<li>あるいは</li>
</ul>

<font> などが使用できない

HTML の Strict(厳密) と同じなのですが、Transitional な要素は用いるべからず。というコトです。 例えば <font> と bgcolor属性が使えないので文字や背景に色を付けるコトすらできません。 レイアウトや装飾は外部スタイルシートによって指定するワケです。


結局、メンドくさいだけですやん

あなたが省略したがりだったりスペルミスの多い人であるならば、ルーズな記述を嫌う XHTML に戸惑ってしまうでしょう。 徹男、正志、律子、という感じの厳格な XHTML。 「徹底的に正しく律する」人物像が求められます。

ただね、メンドくさがりであるならば将来的に手直しをする手間も省きたいものです。 時代を先取りしておけば、数年間ウェブサイトを放置していても時代に取り残されるコトはないでしょう(内容はともかくとして)。 '00年と'04年でブラウザのシェアが一変したように、3,4年もたてば状況は劇的に変わってしまうと予想できます。 IE7 が優勢になるでしょうが、Mozilla や Opera のシェアが 20%程度に増えるコトも考えられます。

Transitional 方式のウェブページが '04年現在では多いようですが、 今後 Strict(XHTML)のウェブページが増えていくコトは間違いのない流れであります。 そうなれば、ブラウザに必要とされる実装内容も変化を遂げ、エディターソフトの方向性にも変化が見られるでしょう。 未来のある時点から猛烈な勢いで Transitional が廃れていく可能性は決して否定するコトのできないものです。 しかし、XHTML を取り入れておけば何も恐れるコトはないワケです。



©2004 webman60kg / リンクはご自由にどうぞ
E-mail : webman60kg@infoseek.jp