XHTMLとは

XHTMLCSSの概要

まず,HTMLとその先祖と言えるSGMLを簡単に説明します.SGMLは1986年に国際標準として規定された,(本来は)本格的な文書資料を扱うために設計された言語です.文書の構造のマークアップには優れていましたが,ウェブ制作者の視点では,その厳密さが手軽なウェブサイトの制作を妨げていました.そこで,HTMLが考案されました.SGMLの文法を使っていますが,SGMLに比べて初心者の習得が容易で,ウェブサイトの記述に特化したため,ウェブの普及に伴い注目されました.

なぜ,HTMLを使い続ける必要がなくなってきたのでしょうか.これは,主にHTMLの仕様や,UA(ウェブを閲覧するソフト)の開発者がHTMLの文法を無視して,過激に競争したからです.例えば,HTMLでは文法が誤っていても,UAが無視すると設定していれば,問題なくページを表示できます.あくまでUAが対処しているだけで,正確な表示は保証されません.要素(タグ)をどう解釈して表示するかは,UAに任されています.各ベンダが見た目にこだわり,特定のUAしか解釈できない要素を定義した結果,ウェブ上にあるHTML文書は文法違反だらけになりました(タグの濫用)

ウェブサイトの見た目はデザインの観点で必要です.そもそも,SGMLの難解さをなくした言語ですから,習得の容易さと引き替えに,多少の文法違反は許されるかもしれません.しかし,例えば,携帯端末が普及した現代において,携帯端末が文書を正確に表示できないと困ります.

この問題の解決には,SGMLの記述能力のほぼ全てを備えつつ,SGMLの複雑さを払拭した新しい文法の作成が必要でした.そこで,W3CXMLを制定しました.詳細は割愛しますが,XMLによりユーザ独自の要素を設定できるようになりました.また,更新情報等を1つのファイルにまとめて,ユーザに迅速に伝えるためのRSSは,XMLの文法に従います.

XHTMLHTMLの用語とXMLの構文を利用した言語です.要素は一部を除いてHTMLと同じですが,XMLの文法が採用されているので,多くのUAで解釈できます.端的に言えば,XHTMLXMLHTMLの長所を融合した言語です.XHTMLは文書の構造を記述する言語ですから,デザインには不向きです.そこで,W3Cは見た目を記述する言語としてCSSを制定しました.現在,CSSを使うことによって,今まで(本来ないはずの)HTMLで実現してきたデザインのほとんどを実現できます.

XHTMLCSSへの対応が不十分なUAがあるため,正確な文法で書いても正しく表示されない場合はありますが,今後の動向を考えると,ウェブサイトの記述はXHTMLCSSで行うことにすれば,決して損にはならないと思います.

XHTMLの基本書式

<?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">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> (※1) <title>(※2)</title> </head>
<body> (※3) </body>
</html>

上記のソースは文字コードがUTF-8の場合です.

(※1)にヘッダ情報を書き,(※2)に文書のタイトルを書きます.ここで書いた文字列は,UAのタイトルバーに表示されますが,タグを使った文字装飾はできません.また,あまりに長い場合は途中で切られてしまうことがあります(最低半角64文字は表示するよう定められています).ページの内容を書く部分が(※3)です.

通常,XHTMLファイルのファイル名は半角英数字のみで,拡張子は.htmまたは.htmlです.

XHTMLでは,2文字以上の半角スペースは1文字の半角スペースと扱います(全角スペースはこの限りではありませんが使用は推奨しません).また,エディタで改行しても表示に変わりはありません.

文字実体参照

半角文字の<,>,&,"を表示するときは,次のように記述します.

出力する文字 入力する文字
< &lt;
> &gt;
& &amp;
" &quot;

コメント

<!--この中にコメントを書きます-->

文書中にコメントを書けます.UAでは表示されません.コメントは複数行記述できますが,--(ハイフン2つ)を書くことはできません.また,<や>も書かない方が安全です.

Caution

コメントは画面に表示されないだけで,ソースを表示すれば見えます.人に知られて困ることは書かないようにしましょう.

Column

Internet Explorer独自のcomment要素があります.基本的には上と同じ機能ですが,最初から定義されていたものをUA固有の要素として再定義した意図は分かりません.

XHTMLHTMLの違い

well-formed(整形式)であること

No Good

<em><strong>強調したい文</em></strong>

これは,次のように書かなければいけません.

<em><strong>強調したい文</strong></em>

閉じタグは省略できない

No Good

<ul> <li>内容1 <li>内容2 </ul>

これは,次のように書かなければいけません.

<ul> <li>内容1</li> <li>内容2</li> </ul>

また,<br><hr>は,<br /><hr />と書きます.

要素と属性の記述は小文字を使う・属性の値は"で囲む

No Good

<IMG SRC="example.jpg" ALT="写真" WIDTH=88 HEIGHT=33 />

これは,次のように書かなければいけません.

<img src="example.jpg" alt="写真" width="88" height="33" />

なお,img要素も要素の閉じ方が異なります.また,&LT;等も&lt;と小文字にします.

属性の省略形は使用不可

No Good

<input id="q1" type="checkbox" checked />

これは,次のように書かなければいけません.

<input id="q1" type="checkbox" checked="checked" />

なお,input要素もimg要素と同様に閉じ方が異なります.

id属性とname属性

要素を一意に特定するための属性です.XHTML 1.0では経過装置として両方が使えます.XHTML 1.1では,name属性が廃止されました.

メディアタイプ

XHTMLファイルのメディアタイプはtext/htmlです.