HTML講座

HTMLの歴史

HTMLのごく簡単な歴史振り返り

区分ver時期
黎明期1989年~発明から実用化へ
HTML1.01993年6月とりあえず規格化された。
普及期1994年~Netscapeを中心に仕様拡張が進む。
HTML2.01995年11月日本語が「正式に」使えるようになった。
発展期1995年~NetscapeとマイクロソフトのInternet Explorerで独自タグ開発競争が進む。独自タグの乱立。
HTML3.21997年1月乱立した独自タグを整理して、何とか共通規格として運用しようとする。
混迷期1997年~規格の共通化が模索される一方で多様なデバイスへの対応を目指して、独自規格の乱立が止まらない。
HTML4.01997年12月W3C(ワールド・ワイド・ウェブ・コンソーシアム)怒りの鉄拳。近い将来タグの数を大幅に削減するからヨロシク!
整備期1998年~W3Cの意図を汲んで、「本来の」HTMLへの回帰を目指す動き。
HTML4.011999年12月HTML4.0に最終調整をかけて、本格規格化!ただしTransitional,framesetという日和見・玉虫色仕様を残す。
2000年~拘り派がHTML4.01 Strictやその応用形のXHTML1.0に準拠したページを作成する一方で、4.01 Transitionalの曖昧さを最大限に「活用」したサイトが主流を占め続ける。
HTML52014年~HTML4.01 Strictを洗練させ、機能拡張したHTML5が規格化され、スマホ・タブレットなどのデバイスへの対応も含めてHTML5化が徐々に進みつつある。

HTMLの「黒」歴史

かつての「高度なテクニックを駆使した」ホームページ

各ブラウザが独自タグで「高機能」を競った時代の「ホームページ」。

この時代のコンピュータ学習用教科書には某テキストの例題みたいなのがいっぱい並んでいました。このレベルの「ホームページ」なら簡単に作れますが、今見てみると余り嬉しくありませんね。

ほとんど裸のHTML

リンク先のページ自体はHTML4.01 Transitionalで書かれていますが、もっと古い規格でも同内容のものは書けます。そして本サイトが準拠しているHTML5でもほぼ同等に書けるのです。HTMLとしては扱いやすい記述で書かれていますが、書式をブラウザ任せにしているのであまり見やすくはありません。特に文字が画面横にびっちり埋められているのが読みにくい!書籍でもそうですが、マージン(余白)のない文章は非常に読みづらいものなのです。

マージンが無くて読みにくいから…

左に文字がきっちり埋まってしまうHTML(ブラウザ)の初期表示に対して、変化を持たせようとして流行ったのが「センタリング」です。ワープロソフトでも最初にやりたくなる書式設定ですね。ただ見出しをセンタリングするのは良いのですが、本文まるごとセンタリングするには通常はやりません。でもなぜか「ホームページ」ではそういう書式が横行したのです。いま改めて見てみると結構みっともないですね。当時から嫌う人は嫌っていて、この手の書式設定を行っているサイトを「蛸壺」サイトなどと呼んでいたりしました。

マージンを作ってみた!

大切なのは左揃えを拒否することじゃない!マージン(余白)を作ることなんだ!というわけで、通常では作れない余白を作る「裏技」が流通しました。ふむ、見事に余白が作られていますね。めでたし、めでたし!じゃない!

このページが余白を実現している手段はソースを見てみてください。<blockquote></blockquote>で全体を囲っています。blockquoteのquoteは「引用する」という英語の動詞です。このタグは引用部を示すためのものなのです。リンク先のページ、全文引用なのですか?

段組風?

余白作りへの苦闘とともに、もう一つHTMLで人々がやりたかったことがあります。それは「段組」表示です。「段組」本来の使い方と言うよりも、左右どちらかに本文とは別の領域を作り、そこにリンク集とか更新情報、その他諸々のサイトの付帯情報を載せたい、というものです。いわゆる「サイドバー」などと呼ばれるものです。

この「サイドバー」部分は、サイト内でページを遷移しても、共通して用いたいことが多く、段組を作りたいという要望と部品を共通化して用いたいという要望を一気に解決する手法として用意されたのがこの「フレーム」と呼ばれる技術でした。中々に便利そう、と一旦は多くの人が飛びついたのですが、その後早々に廃れ、いまでは組織内アプリに細々と用いられている程度になっています。またフレームを作る規格もHTML5では廃止されてしまいます。何が悪かったのでしょう?(「サイドバー」の「プロフィール」のリンクをクリックしてみてください)

これぞ段組!?

「部品」を共通化したい、という要望は脇に置いておいて、ともあれ段組風にサイドバーを設置したい、ページ全体にマージンを作りたい、という要求を一気にかなえる手法が席巻しました。全体を表組みにしてしまえ、というものです。表でレイアウトを実現するというのは、表本来の使い方かどうかはともかく、blockquoteのような根本的な意味の取り違えはありません。しかも頑張れば相当に緻密なレイアウトも可能、ウェブデザイナー必須の技術となりました。今でも凝った体裁のウェブページの半数かそれ以上がこの技術を使っています。

でもこれももはや過去の技術となりました。やはりレイアウトというのは「表本来」の使い道ではないのです。具体的にはいくつかの問題点が指摘されています。その大きな問題の一つはソースの中にあります。これまでのソースは(フレームバージョンを除き)「リンク集」部分は「本文」より下に書かれています。情報の優先順位からすれば当然です。しかしこの表を用いた段組方式ではサイドバーを左に配する限り、「本文」の前に「リンク集」が来てしまいます。これでは本末転倒です。サイドバーを右に置けば解決することではありますが。。。

その他、ソース自体が余りにも複雑で、その構造を読み解くのは容易ではありません。少しの内容、デザイン変更でも大きな手間が掛かる可能性があります。見かけというのはウェブサイトにとって大切な要素ではあるのですが、そのために犠牲にしたものが余りにも多い、HTMLはシンプルに情報だけを記述し、見かけ・書式は別に設定したほうがよかろう、というのが現在の考え方です。

現在のトレンド

HTML4.01+CSS2/3からHTML5+CSS3へ

HTMLから見かけ・表現のための要素を徹底的に排除し、それはすべてスタイルシート(CSS)と呼ばれるものに移行する方向で規格化が図られていきます。ただいきなりそうしてしまうのは諸々無理があったため、移行のための規格も作られました。それがHTML4.01 StrictとHTML4.01 Transitionalです。HTML4.01 Transitionalは移行用の規格なので、見かけのための要素が*渋々*残りました。それ以前のサイトもこの規格でほぼ再現できるようになっています(上のHTML群はそうして書かれています。)。

一方HTML4.01 Strictやそれと同等(+α)のXHTML1.01はHTMLの理想を実現したものとなっています。使用できるタグは大幅に削減され、その代わりにスタイルシートがどんどん充実していきました。懸案の余白(マージン)も段組もすべてCSSでエレガントに実現できます。

そしてこの流れをより洗練させたものとして登場しているのがHTML5です。文書構造を記述するための要素をより充実させ、論理的なマークアップがよりやりやすくなっています。

番外編

ちゃっかり生き残ったフレーム

HTML5では「フレーム」は廃されました。それではサイドバーのような「部品」の共通化ができなくなってしまいます。そのための手段としてHTMLの外の技術、ウェブプログラムが用いられることが多くなっています。が、すべてのウェブサーバスペースでサーバサイドプログラムを動かせるわけではありません(セキュリティ的にユーザに使用を許可していないところが大半です)。ということでそのための救済的な意味もあるのでしょうか、フレームはフレームでも「インナーフレーム」という規格だけはHTML5でも生き残りました。インナーフレームは段組的なレイアウトには役に立ちません(リンク先はそうしたレイアウトはCSSで実現しています)。フレームの役割を限定することで、存続を許された、ということでしょう。ただしインナーフレームは運用の仕方によっては廃止されたあの「フレーム」の邪悪さはほぼ持っています。でもそこは運用次第ということで、一定の役割を持って生き残っていくのでしょう。