メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。
今週のおさらいバックナンバーはこちらから 第1号 第2号 第3号 第4号 第5号 第6号 第7号 第8号 第9号 第10号 第11号 第12号 第13号 第14号 第15号 第16号 第17号 第18号 第19号 第20号 第21号 第22号 第23号 第24号 第25号 第26号 第27号 第28号 第29号 第30号 第31号 第32号 第33号 第34号 目次 プレーンテキスト版バックナンバー
毎週金曜日配信 What's New 2003/1/17 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 今週の課題 ■ 初めてのXHTML講座 第2回
XHTMLは、HTMLと次の点で大きく異なっています。
XHTMLで決められた「お約束事」の詳細です。
a と A は違うものと判断します。
XHTMLでは、要素・属性は小文字で記述しなければなりません。
HTMLでは、終了タグが省略できる要素が多く存在します。終了タグを省略した場合、ブラウザ側で次の要素の出現時に、終了タグを自動的に補完してくれました。しかし、XML文書では、必ずしも Webブラウザを利用するとは限りません。他の XMLを解釈する XMLパーサなどでは、終了タグの省略を許していないため、必ず記述しなければなりません。
HTMLでの空要素とは、終了タグを持たない要素のことで、br、img、col、input など多く存在します。しかし、XMLでは、Webブラウザだけの使用にとどまりません。他の XMLパーサを利用することが多いため、空要素にもそれなりの扱いが求められています。
空要素では、その行末に半角スペース+スラッシュを必ず記述しなければなりません。
<img src="hana.png" width="200" height="150" alt="Flower" />
HTML <img src="hana.png" width=200 height=150 alt=Flower> XHTML <img src="hana.png" width="200" height="150" alt="Flower" />
HTMLで癖になっている方は、今から属性値に引用符で囲むように心がけるようにしましょう。
<option selected="selected">該当する属性名は以下の12個のみです。(XHTML1.0 の場合)
compact、checked、disabled、defer、declare、ismap、multiple、noshade、nowrap、noresize、selected、readonly
ただし、古いブラウザの中には、このような記述では正しく解釈できなくなる恐れがあります。XHTMLの仕様書にはこの問題に対する解決法は述べていないのですが、HTML4/4.01 に対応したブラウザであれば問題にならない、と書かれています。
well-formed」 という文書の状態である必要があり、タグの入れ子の順序を間違えてはいけません。
× <p>タグの入れ子は <em>正しく記述</p>する</em> ○ <p>タグの入れ子は <em>正しく記述</em>する</p>
<script type="text/javascript">
<!--
実体参照を含むスクリプトの記述
--//>
</script>
この問題を解決するために、CDセクションを設ける手段がありますが、多くのブラウザで対応していないため現実的ではありません。
スクリプトやスタイルシートを外部に置く方法が強く推奨されています。
<?xml version="1.0" encoding="Shift_Jis"?>HTMLから見れば見慣れない構文ですが、XHTMLが XML文書であることの証明でもあります。ただし、記述する文字コードが、国際化符号の
UTF-16、UTF-8 であれば、省略することも可能ですが、なるべく記述するようにしましょう。
なお、文字コードを指定する記述に、大文字と小文字の区別はありません。
× <body bgcolor="#ffffcc" text="black" link="blue" vlink="purple"> × <font size="3" color="red">XML、XHTMLでは文書を論理的な構造化フォーマットで記述することが求められています。見栄えを特定する場合には、すべてスタイルシートを用いなければなりません。
XHTMLを作成することはそう難しいことではありません。上記にある数々の基本を身に付ければ、すぐにでも XHTMLを作ることができます。XHTMLは上記にある基本的なこと以上に、様々な拡張機能が備わっています。講座では、その「拡張された機能」について詳しく解説する予定です。
XHTML文書サンプル (詳しい XHTMLの記述は今週のマガジンを参照してください。)