タグ：ちゃんと知識『XHTML』

文書構造と装飾の分離

XHTMLには、もう一つ大きな目的がありました。それは「文書構造」と「装飾」の分離。

ちょっと言葉は難しいですが、次の例を見てみましょう。

文章の中でもここは<b>非常</b>に大切です

このHTMLは、次のように表示されます。

しかし、ここでマークアップした「b」というタグ。これは「ボールド＝太字」という意味しかありません。
この部分の内容が重要だから太字にしたのか、それとも見栄え上、太字にしたいだけだったのかといった区別ができないのです。

また、「太字」にするというのはこのWebページを表示するものの機能に委ねられます。
パソコンのWebブラウザであれば、ほぼ問題なく再現できると思いますが、超小型の端末などで太字ができないものがあるかも知れません。また、目が見えない方が使っている「音声ブラウザ」というWebページの内容を読み上げるソフトウェアの場合、「太字」という表現はできないのです。

それでは、次の例を見てみましょう。

文章の中でもここは<strong>非常</strong>に大切です

同じく重要な部分を「strong」というタグでマークアップしています。これは、XHTML的なマークアップ手法です。s「strong」というタグには「強調」という意味しかありません。例えば、太字になるのかもしれませんし、大きな文字で表示されるのかも知れません。赤い文字で表示されるかも知れませんし、大きな音で発声される（音声ブラウザの場合）かもしれません。

どのような表現方法であるかを問わず、「強調」するというマークアップなのです。これが、XHTML的なマークアップです。その要素が、文書内でどのような位置付けであるかだけを、XHTMLでマークアップするというわけです。
以下に各タグをまとめておきましょう。

文書構造を表すタグ

h1

見出し。この下に h2, h3, h4, h5, h6まである

p

段落。文章のまとまり

ul, ol, dl

リスト。同列にいくつかの要素をまとめたい時に使う

装飾のタグ

b

太字

i

イタリック体、斜体

font

フォントを変更したり、文字色を変更するタグ

そこで、XHTMLではこのような「装飾に使われるタグ」は廃止することにしました。

それでもやりたい装飾

XHTMLから、装飾に関わるタグが廃止されてしまったことで、例えば文字を大きくしたいとか、色を変えたいとかの装飾ができなくなってしまいました。

基本的に見出しやリストなどには、次のように文字が大きくなったりマークが付加されたりなど、ある程度Webブラウザが自動的に装飾をするようになっています。

しかし、表示するWebブラウザによって装飾はまちまちな上、お世辞にも格好良い装飾とは言えません。
そこで登場するのが「スタイルシート」です。「CSS（シーエスエス）」という言葉は聞いたことがあるかも知れませんが、CSSもスタイルシートの一種。

これらのスタイルシートを XHTMLと一緒に使うことによって、自由な装飾を施すことができるのです。
CSSについては、すでに多くの専門書籍や入門サイトなどがありますので、そちらを参照してください。本サイトでも、別の機会に連載するかもしれません。

» ちゃんと知識『XHTML』

XHTMLは「eXtensible HTMLExtensible HTML(*1)」の略称です。extensibleとは「拡張できる」といった意味ですが、ここではそのような意味で使われるわけではなく「XML」という技術から作られたため、こう名付けられました。

*1 2008月 8月 23日追記
XHTMLの略称について、間違えた記述がございました。詳しくは、以下のエントリーをご覧ください。
» XHTMLは、「eXtensible HTML」の略称ではない - ちゃんとWeb by H2O Space.

前回の通り、HTMLは Webページを作成できる便利な技術であったものの、ルールの定義が曖昧であることが問題でした。そこで、ルールをすっきりと整理して作り直したものが XHTMLです。

タグは必ず小文字で記述する

「<P>」や「<IMG…>」など、大文字で記述することができたものを、必ず小文字で記述することにしました。

閉じタグとセットで利用し、省略して記述しない。

たとえば、HTMLでは改行するために、次のようにしたりしました。

改行します<p>

しかし、このようなタグの使い方は改め、必ず閉じタグとセットで利用します。
一部の閉じタグがないものについては、次のように記述して閉じていることを明確にします。

<hr />

属性はタブルクオーテーションで囲む

次のように属性の囲みがあってもなくても良かったものを「必ずダブるクオーテーションで囲む」というルールにしました。

<img src=/images/image1.jpg>
↓
<img src="/images/image1.jpg" />

このようにルールを整理し直したものが、XHTMLです。XHTMLには、次のような利点があります。

見やすく、統一しやすい

XHTMLは、ルールが統一されているため、ページごとの見た目が統一され、非常に見やすくなります。また、Webサイトの制作者が代わっても、統一されたルールで作りつづけられるため、つねに統一された状態を保つことが出来ます。

学習しやすい

XHTMLには「例外」がなく、一つのルールを覚えるだけで覚えることが出来ます。
入門書によって、紹介されている内容がちがい、何を信じたら良いかわからない。といったことがありません。

再利用しやすい

これはちょっと難しいですが、一定のルールで作られた文書は「解析」がしやすく、コンピュータが処理をしやすい形式になります。そのため、文書を再利用したりしやすくなるのです。

このように利点がたくさんある XHTML。これから学習・制作をするなら、是非 XHTMLを使いましょう。

» ちゃんと知識『XHTML』

HTML（エイチティーエムエル）は、「Hyper Text Markup Language」の頭文字を取った略称で、ホームページ（Webサイト）を作るための技術です。

たとえば、次のようなものがHTMLです。（実際には、もう少し決まり文句が必要です）

<p>重要な部分を<b>太字</b>にします。</p>

これをWebブラウザに表示すると、図のようになります。

<p>や<b>といった記号を「HTMLタグ」または略して「タグ」と呼びます。HTMLは、このタグを文章の中に埋め込んでいくことで、Webページを作り上げていきます。

たとえば、先の例では「太字」と書かれた部分が太い文字で表示されています。これは、「<b>」というタグに「太字にする」という意味があるからです。

Webページを作るためには、このHTMLの種類やルールを覚えて、作り上げていけばよいわけです。非常に覚えやすく扱いやすいため、あっという間に広まり、現在のように、数え切れないほどのWebサイトが存在する状況になったことは、いうまでもありません。

しかし、HTMLは不完全だったためか、人によって書き方がまちまちになってしまい、あまり良くない状況になってしまいました。たとえば、次のような面で統一が図れていなかったのです。

タグを大文字で記述するか、小文字で記述するか

たとえば、同じ「<b>」というタグも「<B>」と大文字で記述しても、「<b>」と小文字で記述しても問題ありませんでした。そのため、大文字と小文字が混在してしまいました。

属性をダブルクオーテーションで囲むか、囲まないか

タグは、次のように「属性」を使って細かな指定を行うことができます。

<img src="/images/image1.jpg"…>

しかし、この属性の囲みを次のようにしても問題ありませんでした。

<img src=/images/image1.jpg…>
<img src=’/images/image1.jpg’…>

閉じタグとセットで使うか、単体で使うか

タグは、基本的には次のように「閉じタグ」とセットで使います。

<b>…</b>

しかし、たとえば先の「<img>」タグのように閉じタグがないタグもありますし、次のように「<p>」というタグを閉じタグとセットにせずに使うことができました。

段落の終わりです。<p>

このように、かなり人それぞれの書き方ができてしまうため、収拾がつかなくなってきました。
そこで（これだけの理由ではありませんが）、一度ルールを整理して作り直したものが「XHTML（エックスエイチティーエムエル）」です。

次回は、XHTMLについて詳しく紹介しましょう。

» ちゃんと知識『XHTML』