おふとんの人 → ホームページ教室 → HTMLとXHTMLの違い

HTMLからXHTML、そしてXMLへ

HTMLとXHTMLの違いは、一言で「正確な記述」です。HTMLがバージョン5を迎えていますが、マークアップ言語に求める市場の要求が、HTMLの仕様のほぼ限界に来ているため、その後継版としてXMLが提唱されます。ところがXMLはHTMLと比べて、記述方法が厳密で難しいので、その中間としてXHTMLが生まれました。「おふとんの人」は、HTML5で記述していますので、ソースを参考にして下さい。

HTMLのバージョン

HTMLは、文字列に意味を持たせるためにマークアップ言語として提唱されて生まれてきましたが、改良がなされ、バージョン5を迎えています。以前に、DOCTYPE宣言でも述べましたが、HTMLのDOCTYPE宣言は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

と書きましたが、ここで「HTML 4.01 Transitional」と書いてあるように、HTMLバージョン４のTransitionalを使うという宣言です。このように、HTMLは少しずつ改良が加えられて、タグが増えたり仕様が変更になったりして、バージョン４まで来ました。

HTMLのマークアップでは、pタグで「ここは段落です」や、emタグで「ここは重要です」といった抽象的な意味しか持たせることができません。それを補うようにid属性を使用します。

次世代のXML

そこで、もっと便利なマークアップ言語が必要であるということで、XMLが提唱されました。これは、タグ自体を勝手に作ることができ、自作のタグで「ここはカレーライスについて」とか、「ここは在庫数について」などとマークアップできる、とても有用なものです。

XHTMLは、HTMLとXMLの中間

ところが、XMLはHTMLと違って、マークアップのミスが許されないばかりか、宣言が複雑で一般的なパソコンレベルの人が覚えるには、とても難しいと思います。そこで、HTMLからXMLへの時代転換をワン・クッション置くということで、XHTMLが生まれました。

XHTMLは、詳しくは後述しますが、XMLに分類されるために、XMLの厳密性とHTMLの簡素な性質を併せ持ったマークアップ言語です。

XHTMLの宣言

先ほども述べましたが、「おふとんの人」はXHTMLで記述してあります。そのため、XHTMLの宣言は、このＷｅｂページのソースを見て頂けたらよいのですが、次のようになります。

<?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">

３行ございますが、１行目はXMLの宣言になります。XHTMLはXMLに分類されてくるので、XMLの宣言が必要になってきます。ところが、この宣言はまだ対応していないブラウザが多いのか、この宣言を入れていると、ソースをうまく認識してくれない場合があり、JavaScriptが動作しないというトラブルが発生することもあります。

そこで、厳密にはダメな行為なのですが、この１行目の宣言を省いている人もいるようです。私も、お客様に納品するＷｅｂページでは、動作保証のために、XMLの宣言を記述していません。

２行目と３行目は、DOCTYPE宣言です。長い宣言ですので２行に分けてあります。意味としては、「W3Cのルールに従って、XHTMLバージョン１のTransitionalで記述します。」という具合です。

A8広告

HTMLとXHTMLの違い

ソースの記述ミスに対する寛容性

HTMLでは、ソースの記述が多少ミスをしていても、ブラウザが勝手にミスを修正してくれて、うまく記述される場合があります。そのことから、最近では少なくなってきましたが、市販されているHTMLの解説本でも、間違った教え方をしている本を見かけることがあります。

XHTMLのルールでは、XMLに近いXHTMLですので、ソースの記述にミスが許されません。例えば、HTMLでは終了タグを入れ忘れてもほぼ問題ないのですが、XHTMLでは、記述ミスと見なされます。

そうとは言うものの、今現段階で使用されているブラウザは、ＷｅｂページがXHTMLで宣言されていても、HTMLと同様に扱われて、記述ミスを許してくれるものばかりです。

記述方法の違い

XHTMLは、HTMLと比べて次のような大きな違いがあります。

  • 終了タグを省略できない。

では、終了タグを必要としないhrタグやimgタグなどは、どのように記述するかと言いますと

●HTMLでのhrタグ

<hr>

●XHTMLでのhrタグ

<hr></hr>

または

<hr />

XHTMLでは、終了タグを省略できないので、前者のように強引に終了タグを入れます。本来終了タグを必要としないタグに、強引に終了タグを入れるのは面倒なので、後者のような表現が導入されました。私は、後者を使用しています。

それ以外では、表示のされ方など、まったく同じです。

装飾方法の違い

マークアップ言語は、コンテンツをマークアップするのが目的ですが、実際のＷｅｂページでは、マークアップのみならず文字の色を変えたり、大きさを変えたり、線を引いたり、センターリングしたりと、文字の見た目を変えています。

そのような装飾を、HTMLでは文字を装飾するためのタグ、例えば文字の色や大きさを変えるためのfontタグを用いたり、太字にするためのbタグを用いたりしますが、XHTMLでは、これらのような、マークアップではなく見た目を変えるためのタグは、過去との互換のために残してありますが、基本的に消滅させる方向で動いていますので、使用しない方が良いと思います。

では、どのように文字の色、大きさ、線などを変更するかと言いますと、スタイルシートを用います。スタイルシートに関しては、次の章で述べることに致します。

言語の指定

「18.html、title、divの説明」のHTMLタグでも説明したように、lang属性などで言語の指定をしなければなりませんが、XHTMLでは、言語の指定方法がHTMLの場合と少し異なってきます。

●XHTMLでの日本語指定

<html xml:lang="ja" lang="ja">

このように、xml:lang属性が入ります。厳密には、このxml:lang属性を指定すると、lang属性が必要でなくなるのですが、ブラウザによってはxml:lang属性を認識しないものもあるので、念のためlang属性を残しておきます。

あえて述べなくてもご存じだと思いますが、これらのxml:lang属性とlang属性は、前後が入れ替わっても問題ございません。

結局、HTMLとXHTML、どちらを使えばよい？

結局のところ、どちらを使ってもよいです。

未だに人気の歌舞伎と比べるのは、ジャンル違いかと思いますが、HTMLも同様に、１０数年経っても無くならないと思います。ですので、慣れないうちは簡単なHTMLを使えばよいと思います。また、いずれはXMLに移行すると思うので、XHTMLで記述していく方向で良いと思うのですが、まずはHTMLで練習しておいて、慣れたらXHTMLに記述し直すというのも、一つの手だと思います。