HTMLからXHTMLの時代へ
XHTMLって？
さて、「XHTML」とは何でしょうか？「HTML」と「XML」の架け橋的役割を持っているものとよく言われます。 元々、「HTML」というものは文書交換が目的で作られたものでしたが、「Netscape Navigator」の登場により、インターネットのすさまじい程のブームが始まりました。 そしてすぐにMicroSoft社が「Internet Explorer」を出した訳です。自分は「Netscape Navigator」というものは現在家に購入したものがありましたが、 Macintoshで当時は使用していて、定価7800円ほどでした。当時はさほどインターネットはまだ流行り始めた最初の頃だったと思います。
しかし、「Internet Explorer」が無料で配布するというMicrosoft社の作戦に「Netscape Navigator」もただただ 対抗しようにも相手の力はあまりにも巨大すぎます。最後には買収までされてしまいました。それで、この２社が競いあい次々と新しいタグ（要素）を追加され、HTMLもそれに伴い何度もバージョンアップして来ました。
しかし、追加されたタグや機能の多くはWebサイトの表現力をアップさせるものばかりでしたが、その簡単さから 色々な方々がホームページを簡単に作成できるようになったのも事実であります。また、この手軽さがより多くの人がホームページを公開できるようになったのは確かです。
例えば、「見出し」を「h1」要素と「font」要素によってフォントを大きくしただけについて考えて見ましょう。 「h1」要素は「見出し」という意味合いを持つものなので、音声認識ブラウザなどでもきちんと「ここは見出しだよ！」と表現する事が可能になり、ブラウザも理解できます。 しかし、自分が大きく見出しを付けたい時に「font」要素によって ただ文字を大きくしただけだと意味は伝わりますでしょうか？自分では「見出し」と思っていてもブラウザ側は解釈する事ができません。 「ただ単に文字が大きいんだな〜」と解釈してしまいます。ここらへんは非常に意味が分かりにくい事でありますが、W3CというWeb標準規格団体では「意味合いを兼ねてHTMLページを作る」というのが理想なページとされているようです。
実際に自分も真実を知るまでは適当にサイト作りをしていましたが、 「HTML」にもさまざまな規格があり、現在みなさんが最もよく使用しているのがおそらく「HTML4.01」という規格です。「XHTML1.0」というのは「HTML4.01」でも利用できる要素や属性をそのまま用いる事ができ、 書き方をXMLチックにしたものであります。
「Internet Explorer」で閲覧を考えている場合は「HTML4.01」で定義されているタグ＋MicroSoft社が独自で開発したタグをみなさんは使っているわけです。 同様に、「Netscape Navigator」で閲覧を考えている場合は「HTML4.01」で定義されているタグ＋Netscape社が独自で開発したタグをみなさんは使っています。ですから、よくブラウザによって見栄えが違ったりするわけですね。 ベースの「HTML4.01」という規格はW3CというWeb標準規格団体が定めたものなので、変わりません。ですからなるべく「Internet Explorer」専用のタグなどは使用しない方が望ましいと言えます。「marquee」や「nobr」「wbr」とかはそうです。
XMLチックにすると、何か良い事があるのでしょうか？例えば、「HTML」では段落要素「p」やリスト要素の「li」と言ったものは 省略が可能でした。しかし、省略可能なのがあまりに多いとブラウザ側もどこまで掛かっているか？というのも解析しづらいでしょう。きちんと終了タグがあった方が「ここからここまで！」というのがハッキリ分かります。 これは解析プログラムを作る上では非常に簡単になります。わざわざ、省略されたタグの判定などを行わなくて済みますし、高速化にもつながります。「HTML」というのはその曖昧さから人気が出たのも何度も言うように確かではありますが、 今後より長生きし、解析する側にも優しいページ作りをするのであればこのページを参考にして頂ければと思います。でも、やっぱり便利なタグを使って行きたい！というのでしたらそれはそれで良いと思います。
所で、「em」要素と、「i」要素は全く同じ表示なのになんで２つもあるんだ！？と疑問を持つ方もいるのではないでしょうか？自分も最初は意味が全く分かりませんでした。 表示の仕方は同じで斜体です。また、「strong」要素と「b」要素もまた然りです。今までのをふまえると、「b」「i」は見栄えを指定するだけですが、「em」「strong」は意味を含ませる事もできるという点で異なります。 「em」は「強調」を表しますが、「i」はただ表示をイタリックにするだけで、作成者が「強調」を意図としてタグを振ったのかどうかが分かりません。また、「em」要素は斜体だから使いたくない！という方も出てくると思います。 意味合いを考える事にこれからは重点が置かれて来ていますので、スタイルシートには、「em { font-style: normal; }」と指定すると、標準フォントで表示されます。つまり、見栄えはスタイルシートで自在に操り、HTMLでは意味合いを含んだ ページ作りができるという事になるわけですね。
勿論いきなり書いたのではタグの閉じ忘れのミスや、その他のミスでプログラムが一発でなかなか動かないのと同じで完全に 文法に沿ったHTMLを記述するのは無理と考えていいと思います。ですから、インターネット上にはその文法をチェックしてくれるものや判定してくれるソフトウェアが存在しますが、 知らない方の方が多い事と思いますので、その時、チェッカに掛けて点数が悪くても別に気にしなくて良いと思います。 ただ、HTMLではそれでも表示されますが、XMLは完全に文法的にマッチしていないと動きませんので注意しておくのは次期に役立つ事になるであろうと思われます。 XHTMLも基本的にはXMLでも扱えるようにしたものなので、注意しておく必要性がある… という事になります。
XHTMLへの移行を考える時のポイント
「XHTML」への移行は基本的にパターン化であります。「XHTML1.1」という規格に従うのはすでにサイトを公開してしまっている方で、 レイアウトに属性をガシガシ使ってた方に取っては非常に骨の折れる作業ですが、「XHTML1.0」はソフトウェアを使えば比較的簡単に変換できます。それで書き方の留意点なのですが、いくつかの事項を覚えれば後はパターンです。
- タグ内の要素名と属性名は必ず小文字で書く
- 属性値には必ず引用符（ダブル・シングルクォーテーション）で囲む
- 空要素は最後にスラッシュを付加するか、終了タグを付ける
- 「&」は必ず「&」と記述する
- XMLバージョンとドキュメントタイプを記述する
- タグは必ずウェル・フォームドにする（オーバーラップさせないという事です）
- 属性値内で不要な改行はしない
- name属性とid属性を併用する
- スクリプトやスタイルはCDATAセクションとする
- 属性は最小化できません
これらの決まりがあります。「XHTML」は見方では「XML」なので中途半端な書き方では許されません。 プログラミング言語がちょっとした書き方のミスでも許されないのと同じです。ブラウザが寛大なので現在では色々許されている…というだけの話になりますが。。。
ではでは、順番に見て行く事にしましょう。
- タグ内の要素名と属性名は必ず小文字で書く
<A HREF="http://www.yahoo.com/"> → <a href="http://www.yahoo.com/">- 属性値には必ず引用符（ダブル・シングルクォーテーション）で囲む
<body bgcolor=#808080> → <body bgcolor="#808080">- 空要素は最後にスラッシュを付加するか、終了タグを付ける
-
<img src="logo.gif"> → <img src="logo.gif" /><img src="logo.gif"> → <img src="logo.gif"></img>
- "&"は必ず"&"と記述する
<a href="counter.cgi?id=1&type=0"> → <a href="counter.cgi?id=1&type=0">- 冒頭にXML宣言（詳しくは次項参考）とドキュメントタイプを記述する
-
<?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"> - タグは必ずウェル・フォームド（オーバーラップさせない）にする。
<em>abc<big>de</em>fgh</big> → <em>abc</em><big><em>de</em>fgh</big>- name属性とid属性を併用する
<a name="top"> → <a name="top" id="top">- スクリプトやスタイルはCDATAセクションとする
-
<style type="text/css"> <!-- --> </style> ...これを以下のように書き換えます。 <style type="text/css"> <![CDATA[ <!-- --> ]]> </style> - 属性は最小化できません
<dl compact> → <dl compact="compact">
取りあえず変換だけであるならばこれで構いません。「XHTML1.0」は基本的に「HTML4.01」のタグや属性を そのまま継承し、書き方だけ注意すればできあがります。この変換にはW3Cから「HTML Tidy」というものが出ていますが、日本語版には対応していません。 宣伝になってしまうのですが、拙作「Cross-Talk」をご利用下さい（シェアウェア）。体験版でも軽い変換はできるようになっています。
XML宣言って何？
XML文書では必須ではありませんが、文書の先頭でXML宣言を行い、XMLのバージョンと使用する文字コードを宣言します。 ただし、文字コードが「UTF-8」「UTF-16」以外で文字コードが明確に示されていない場合には必ずXML宣言を行って使用する文字コードを明示する必要があります。 これもやはり予め文字コードを設定しておき、判定するための無駄な事をしないためだと思います。
- Shift-JISの場合
<?xml version="1.0" encoding="Shift_JIS"?>- EUCの場合
<?xml version="1.0" encoding="EUC-JP"?>- JISの場合
<?xml version="1.0" encoding="iso-2022-jp"?>
また、Macintosh版のInternet Explorer4.5以前などの一部のブラウザでは、XML宣言を入れると そのまま画面上に表示されてしまうなどの不都合があります。また、「FrontPage」などでは編集時に画面上に出てきてしまいますので編集時には注意して下さい。
モジュール化された「XHTML 1.1」
「XHTML 1.1」という規格が現在次世代を読み越したバージョンとなっております。 「XHTML 1.0 Strict」というものがありますが、「XHTML 1.0 Trasitional」はかなり規制が甘く色々なタグの使用が許可されています。「Strict」というのは日本語訳では「厳格な」 と言うように一切余計なものは省いたものとなっています。「XHTML 1.0 Trasitional」では「font」タグが使えますが、「Strict」では使えません。
「XHTML 1.1」は「モジュール化されたXHTML」とも呼ばれています。「XHTML 1.0」が公開された後に、その内容を元にして 関連する機能別のモジュールである「リスト」「テーブル」「イメージ」などに分割してそれらを組み合わせて新しい定義型とするものです。よりバラエティーに富んだ定義ができ、 色々な環境にマッチする事が出来たと言えるでしょう。必要に応じてこれら標準のモジュールを組み合わせたりして拡張性の高い多種多様な環境に合わせた相互運用性の比較的高い文書を作成できます。
これらのモジュールを組み合わせて「XHTML 1.0 Strict」を再現し、それにルビのモジュールを追加したものが「XHTML 1.1」となります。 そして、携帯電話やPDAなどの小型機器での利用を想定して、必要最小限のモジュールを組み合わせて生成されたものが「XHTML Basic」と呼ばれるものです。
「何故こんな規制があるのか！」と思う方も当然いると思います。しかし、HTMLというのはあくまでも元はといえば 文書構造を表すものであってレイアウトを施すのにレイアウト用のタグを使うのはブラウザ依存になってしまいますし、今後長い目で見た時に必ず壁にぶつかる…という事を想定しています。 そこで、現状ではHTMLでは文書構造をあくまでも示し、レイアウト、デザインはCSS（スタイルシート）によって行うという方針に向かって来ています。ですから、レイアウト用のタグであるものは 基本的に「Strict」ではすべて使う事ができません。段落「p」タグの「align」要素でさえ「XHTML 1.0 Strict」では許可されていません。レイアウトを強制的に省くような仕様になっているとも言えます。
テキストブラウザで閲覧している人や、音声認識ブラウザなどではレイアウトは関係なく情報だけがうまく伝わればそれで良いという事になります。 そこで、HTMLの文書構造さえしっかりしていれば誰が見ても通じます。先程上記の「XHTMLとは？」でお話しましたように、 「h1」要素を使った場合と「font」を使った場合が良い例です。タグを読んで意味の分かるようにすると今後どのような環境が来ても機転が効くという訳です。 また、個人的な余談ですが翻訳ソフトを使っていて感じたのですが、ウェブページを翻訳する時とかも非常に解析しやすくなりますね。 色々ウェブページを解析したり編集したりするソフトウェアにとっても良い行いをしている事になるのです。
しかし、これはあくまで推奨であって強要ではありません。そのように書くと万人が理解できるページとなり、 解析のしやすさも飛躍的にアップしますが、今までFrontPageやHomePage Builderなどで製作された方は、非常に入りづらいかと思います。実際に自分もそのうちの一人でした。 逆にスタイルシートは慣れるまではちょっとハードルが高いですが、慣れるとかなり幅広いデザインもラクに出来るようになります。 テーブルでどうしてもレイアウトしなくてはならない事も出てきますが、単純な配置でしたら使わずに自由度の効くものが作成できます。 。すべてのセルの幅を全体の幅から計算する必要も殆どなくなります。 疑似フレームを「float」でレイアウトすると他のブラウザでは悲惨になってしまいますので、テーブルでデザインするのもひとつの手法です。 また、いちいち罫線を使うのに「table」要素を使う必要もなくなり、容量も格段に軽くなります。 レイアウト用に特化されたのがスタイルシートでありますから、使い勝手は各種要素で定義されている属性よりも自由度は高くなるわけですね。 「Web Frontier」も「XHTML 1.1」でコーディングしていますが、以前に比べてトップページはかなり軽くなっています。 「軽い」「解析しやすい」「どんな環境でも見れる」というので自分は何も言わずに書き換えました。 しかし、最初は結構抵抗がありました。また、詳しい書き方のテクニックについては「リファレンス」を御覧になって下さい。
XHTML 1.1へ移行する時のポイント
先程は「XHTML 1.0」への移行でした。この移行は従来のHTMLをXMLチックに書き直す…というものでしたが、 「XHTML 1.1」へ移行するには色々と考えるべき点が出てきます。以下上記の書き方をすでにふまえた上で必要な事項です。 「XHTML 1.0 Trasitional」は過去のブラウザなどの互換性や従来のHTMLとの互換性を保つためにさまざまなタグが許されているものでしたが、 「XHTML 1.1」は「XHTML 1.0 Strict」から派生しており、完全に独立したXHTML形式で一切余計なものは許可されていないものとなります。 まさに厳しい規格ですが、そもそもXMLというものは文法の１つのミスも許されないのを考えると当然かも知れません。。。
まずはどのようにコーディングするかと言いますと、 以下のサンプルドキュメントを見て見ます。
<!-- XMLバージョンと文書型宣言 -->
<?xml version="1.0" encoding="Shift_JIS"?>
<!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>
<link rel="stylesheet" href="***.css" type="text/css" />
<link rel="start" href="index.html" type="text/html" />
<link rev="made" href="mailto:xxx@w-frontier.com" />
<title>サンプル</title>
</head>
<body>
<!-- まず見出しを明らかにします。 -->
<h1>サンプル</h1>
<!-- 文字は単独には書かず、意味付けを考えて書きます。 -->
<p>サンプルページです。</p>
<h2>目次</h2>
<!-- リストを用いて文書構造を明らかに -->
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>「XHTML 1.1」では「ul」「ol」「dl」と言ったリストは必須という事になっております。 ですから、そのページをリスト化して見出しレベルをハッキリさせると良いと思います。見出しレベルは1から始まり6まであるのでうまく振り分けて下さい。 新聞の見出しも「大見出し」「小見出し」がありますように、それに従って見出しレベルタグを付けていきます。ただ、文字を大きくするために「h1」要素などを 使うのは止めた方が良いでしょう。
また、注意する点と致しましてはハイパーリンクの「a」要素では、先程「HTML」から移行する時には、 「name属性とid属性を併用する」と言いましたが、「XHTML 1.1」ではname属性の変わりにすべてid属性を用いる事になります。試しにこのページのソースを見てみて下さい。 また、ハイパーリンクの「target」属性なども使う事はできません。新しいウィンドウで開くかどうかは閲覧者が決めるものであるという観点です。「Shift」を押しながらクリックで、 新しいウィンドウを開く事が出来ます。
また、「XHTML 1.1」へ移行もそうなのですが、アクセシビリティというものがあります。 これは「どんな人でもどんな環境でも快適に見れる」ために推奨されているものであり、W3Cが少しキツそうに感じるのであれば、IBM社のページを参考になれば良いかと思います。
IBM社 : Web アクセシビリティ
http://www-6.ibm.com/jp/accessibility/guideline/accessweb.html
DTDとは！？
XMLでは当然として出てくる「DTD」というものですが、「DTD」とは、「Document Type Definition」の略で日本語に訳すと、 「文書型定義」とも言われます。これは、文法の仕様書見たいなものです。コンピュータが理解しやすいように機械的に書かれていますが、人間でも読む事は可能です。 ただ、多少慣れが必要ですが… 次の例を見ていく事にします。
<!ENTITY % heading "H1|H2|H3|H4|H5|H6">というのは、「実体参照」を意味します。このように定義すると、DTD内部では、「%heading;」と 書かれている部分が「H1|H2|H3|H4|H5|H6」に置き換わります。何かセット単位で扱われている場合には、 このようにすると、手間が省けますので、このように「実体参照」というものを用います。
<!ELEMENT DL - - (DT|DD)+ -- definition list -->というのは、「要素(ELEMENT)」の定義を意味しています。この場合は、「DL」という要素の中に書ける子要素が「DT」または「DD」である事を意味しています。 「|」は「or」の意味です。つまり、「DL」要素の中には、「DT」か「DD」しか書けないという事になります。また、Perlなどの経験がある方や、正規表現というものを 聞いた事がある方は、「+」は「１つ以上連続している」という事は御存知だと思います。全く同じ意味になります。よって、 「DT」または「DD」が「DL」の中には１つ以上存在する…という事になります。また、「--」〜「--」まではコメントとして扱われます。 また、「DL」の次にある「-」と「-」というのは、省略可能かどうかを意味しています。「O」だと「Omitted」の頭文字という事で省略可能という事になります。 p要素などは、HTML 4.01 Trasitionalなどでは、終了タグが省略可能なので「- O」というようになっています。
<!ATTLIST *** >なのですが、これは属性の定義になります。それで、基本的に、実体参照を置き換えた後に、 3つをセットとして考えて行きます。例えば、
src %URI; #REQUIRED;というのが、「IMG」の属性の定義の一部です。これは、「src」という属性は、「%URI;」=「#PCDATA」に置き換わり、「#PCDATA」というのは、 「一般文字列」を意味すると思って下さい。そして、「#REQUIRED」とありますが、「#IMPLIED」なら、「別に書かなくても良い」というものです。 また「#REQUIRED」は「その属性は書かなければならない」というものです。「#FIXED」はその属性は固定属性値を持つという事になり、 「#FIXED」の場合には、その次に更に「'***'」というものが書かれていますが、滅多にないのでそこまで意識しなくても良いと思われます。
間違いのない書き方をしているかどうかをチェックする
「間違いのない書き方」と書いたのであり、「正しい書き方」としなかったのは 下でもしつこく言うのはあくまでも「推奨されている書き方」であるからです。書き方は個人の価値観と考え次第で自由だと思っております。 というわけで（ってつながってませんが…） HTMLを検証してくれるサイトが存在します。
- Another HTML-lint
- HTMLドキュメントを読み込むと、それがどれ程文法的に正確に書けているかを点数で表示してくれます。 おもしろいのでやってみては？完璧に作った！と思っていても意外な結果に驚くかも知れませんね。
- W3C HTML Validator
- 本家の検証システムです。しかし、細やかなニュアンスはやはり「Another HTML-lint」の方が正確なチェックを行ってくれます。 検証に見事通過すると、「Validバナー」なるものがもらえます。「XHTML 1.1」はドロップダウンメニューにないので、「(detect Automatically)」を選べば良いと思います。
ただ注意して頂きたいのが、これらのチェックをすべて言われた通りに直して満点なら良いか？ というのは必ずしもイコールではありません。「HTML-lintで100点なら良いのか」を御覧になって下さい。
XHTML Basic
「XHTML 1.1」の説明で言いましたが、「XHTML Basic」というのは携帯電話やPDAなどの環境でのHTMLだと言いました。 現在では「i-mode」用のHTMLは「Compact HTML」と呼ばれる規格に乗っ取って作成されています。これらは基本的なタグしか使えません。携帯電話にそこまで色々なタグを要求する事も酷というものだと思います。 将来はどうなるかは分かりませんが…
例えば、「XHTML Basic」ではクリッカブルマップなどは使えません。 携帯電話などの特殊な環境なのでそこまでは必要もないと思われます。
ウェブサイト作成ソフトへの期待
現在世の中には「FrontPage」「HomePageBuilder」と言った手軽にあたかもできあがりを見ているかのように ワープロのように作成できる「WYSIWYG」タイプのソフトウェアがあります。これらは今後どうなるかは分かりませんが、 自分は「FrontPage」をメインで使用していました。 「DreamWaver」を出している「MacroMedia」社はアクセシビリティに対応したツールを販売する予定みたいです。
また、これらのソフトウェアはHTMLソースを見てもお分かりのように「font」要素を乱用します。 また、「b」「i」「u」「s」と行った要素で統一されます。これらは「物理要素」と呼ばれます。あくまで見栄えだけを示すものであります。 みなさんが暗黙の了解のうちに利用している「HTML 4.01 Trasitional」においても実はこれらは「非推奨」とされています。別に見栄えだけ… という目的だけなら構わないと思うのですが、 「b」タグを施した制作者が「ただ単に太くしたかった」のか「強調したかった」のか分からないからです。ブラウザでは同じように表示されますが、 これを音声ブラウザなどで認識させた時などに差が顕著に現れてきます。しかし、スタイルシートを使っていれば「レイアウト用」と一意に決まってしまいます。 強調したければ「em」要素を使えば良い… という話になります。よってHTMLソースで意味合いを持たせるのであれば「b」「i」「u」などと言ったのは不適切と判断したのでしょう。 また、HTMLをスリム化するソフトで、「strong」を「b」に変えて、「em」を「i」に変えるというものがあるというウワサを聞きましたが、 これは思わぬ弊害を伴ってしまうかもしれないです。確かにバイト数は小さくなり、見た感じも変わらないので一見よさげに見えるのですが、微妙に意味合いが変わってくるかも知れないという事になります。
ただ、「em」タグは文字が斜体になってしまうではないかッ！と感じる方もいらっしゃるかも知れません。 また、太字の変わりに「strong」要素を使うのも正確には良くありません。「em」は強調、「strong」はより強い強調です。ですから、強調を表したくてかつディスプレイ上には太字にしたいのであれば、 以下のようなスタイルシートを使えば良い訳ですね。
em { font-weight: bold; font-style: normal; }私が製作した「ez-HTML」では各HTML、またはXHTMLのバージョンによって正確な要素や属性の候補を出すようにしてあります。 また、「この親要素の中にあの子要素は入れる事はできたかな？」などと言うのでいちいち参考書を見る必要もありません。DTDに従っていますので、 デフォルトで作成してもかなり完成度の高いHTMLができあがります。また、「Internet Explorer」のDTDさえ読み込ませれば、「Internet Explorer」用のタグが使いたい人向けにもカスタムできます。
SEOとしてのXHTML
SEOというのは"Search Engine Optimization"の省略形で「検索エンジン最適化」という意味です。 最近ではこの表現、良く見かけるようになってきました。 それはgoogleのPagerankを意識していると思われます。 しかし、実際にはXHTMLにするからSEO効果が高まるというよりは、 正しい骨組み、文法のHTMLを記述していれば、検索エンジン側も正確にHTML構文を解析する事ができます。 逆に、ひとつのタグにいろいろな属性（color, font, bgcolor, など）を書くよりは、 スタイルシートでひとまとめにしてしまった方が文書構造は明確となります。 そういう検索エンジンプログラムがウェブページを正確に解析する事が最適化につながっているのだろうと 私は考えています。ですから、ただ今まで記述していたHTMLをXHTMLへと変換する訳ではなく、 もう一度最初に述べた所に戻って、HTMLを正確に理解すると良いかもしれません。
拙作の"ez-HTML"は正確なHTML/XHTMLを記述するために作成されています。