第44回 今更だけど(X)HTMLってなんだろうテーブルレイアウトを卒業しよう

今更だけど(X)HTMLってなんだろう

CSSなどのテクニックを中心にお伝えしているこの連載ですが、その全てのベースになっているHTMLとはいったい何でしょうか。HTMLという言語の認知度も広まり、「Webページを作るためにタグで書くアレでしょ」と答えられる人は非常に多いと思います。

でも、実際の所、本当に正しい基本を知っている人は意外と少ないかもしれません。そこで、これを読めば「HTMLってのはさァ」と明日から語れる、大事な基本をご紹介します。

HTMLってなんの略?

HTMLは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略です。ハイパーテキストをマークアップする言語です。

ハイパーテキストとは、ハイパーリンク(文書間の結びつけ)が設定できる文書のことで、この中で最も有名なものが、皆様ご存じのWWW上で扱われるWebページ(HTML文書)です。

マークアップというのは「意味を付ける」という意味があり、ここまでを全部つなげると、HTMLとは、「文書をハイパーテキストとして意味付けるための言語」と言うことができます。つまり、Webページ(HTML文書)を作るための言語です。

これに謎のXがくっついたXHTMLについてはもう少し後で触れます。

HTMLの歴史

HTML が初めて生まれたのは1993年ですが、当時から今と同じだったわけではありません。当時は非常に簡易なものでした。ですが、その簡易さや、扱いやすさが 今日のWebの発展の基礎となっています。その後、改良が重ねられ、現在ではHTML 4.01というバージョンが最新版です。…といっても完成したのは1999年のことで、今は次のHTML 5が完成に向けて動いています。

HTMLってどう書く?

HTMLには「HTML要素」と呼ばれるものがあり、「タグ」とよばれるもので記述していきます。しかし、この要素とタグという言葉には誤解が多いようです。

要素とは、文書に対して特定の意味、役割をあたえるものです。たとえば、h1要素はheading1(見出し1)、p要素はparagraph(段落)といった意味を持ちます。

そして、要素は「開始タグ」、「内容」、「終了タグ」から構成される全体を指します。つまり、要素=タグではありません。

ということは厳密には、「h1タグ」や「pタグ」という表現は間違いで、「h1要素の開始タグ」となります。が、会話の中などでは普通に使ってしまうのでうるさいことはいいっこなしだとおもいますが、別物である、というのは大事です。

HTMLのルールは?

要素から成り立つHTMLですが、その記述には様々なルールがあります。このルールのことをDTD(Document Type Definition)といいます。そのまま訳すと、「文書型定義」です。このDTDには、HTMLのバージョンや記法により様々な種類があります。

HTML文書内には、「どのDTDに準拠するのか」等のその文書における基準ルールを記述しておく必要があり、それをDOCTYPE宣言といいます。 Dreamweaverなどの、Webオーサリングツールを使っているとあまり意識しないかもしれませんが、非常に重要な部分です。

この記述ルールの中のひとつに、先ほど少し触れた、XHTMLというルールがあります。

XHTMLってなに?

XHTMLとは、eXtensible HyperText Markup Languageの略です。そのまま訳せば、拡張可能なHTMLとなります。これは、HTMLより新しい標準規格としてうまれたルールです。

よくある誤解ですが、XHTMLという拡張子のファイルがあるわけではありません。HTMLファイルの書き方にHTMLとXHTMLという2つの方法がある、というイメージです。

ではなぜ、XHTMLは生まれたのでしょうか。

もともとHTMLは、SGMLというマークアップ言語を元につくられたものでした。これは簡易で、良くも悪くも曖昧だったので、多くの人が使えるようになっ た反面、さまざまな独自ルールなどが氾濫し、標準規格であるはずのHTMLは多くの問題をかかえることになってしまいました。

そこで、HTMLを見直して、XMLをもとに定義しなおされたのがXHTMLです。つまり、XHTMLはXML文書なわけです。

XHTMLのメリットは?

XHTMLのメリットは閲覧者にとっても製作者にとっても多くあります。

まずXMLと文法が同じであるため、XHTMLのなかにXML文書を含むことができます。たとえば、拡大縮小しても画質が劣化しないベクターグラフィックの SVGというファイル形式があります。

このSVGはXMLで記述されているため、XHTMLであれば、SVGをそのままつかうことができるわけです。その ほかにもXMLで記述された様々なファイルをそのまま使えるため、その汎用性や拡張性は非常に高いといえます。

また、XHTMLはレイアウトやデザインはすべてCSSでおこなうことが前提になっているので、ファイルサイズが軽減されてアクセス速度が上がる、音声ブラウザーなどに対応しやすい、検索エンジンでより上位に表示される、などのメリットがあります。

さらには、XHTMLのルールを正しく守っておけば、将来新しいブラウザーや、環境で閲覧される場合にもメンテナンスなしでそのまま再利用できるはずです。

XHTMLの今後は?

Web関連のニュースや情報に詳しい方であれば「HTML5」が気になっているかもしれません。「XHTMLはもう終わった」という見出しを見た方もいるかもしれません。

「近い将来HTML5が勧告されるなら、XHTMLをいまさら覚えても…」

いえ、大丈夫です!HTML5では、XHTMLのルールも使えます。XHTMLが終わったわけではなく、統合されて「どっちでもイケる」ようになったのがHTML5です。いまのリソースは無駄にはなりません。

ということで、歴史や技術的概要まで幅広く取り扱いました。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
CSS3をIEの独自拡張で再現する【その1】
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読