第3回:XHTML+CSSですっきり整理のサイト制作 - ちゃんと知識『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』