みなさんが見ている web ページは、見えたそのままの形でネットワーク上を送られてきたのではありません。ネットワーク上でやりとりされているのは、「HTML」と呼ばれる「一定の決まりに従って作られた、文字で書き表された表現」です。HTML は Hyper Text Markup Language の頭文字をとったものです。ネットワーク上を送られてきた「文字で書き表された表現」を、みなさんが見ているような「見え方」に変換して表示しているのです。いわゆる「ネットを見るソフト(アプリ)」(←あえて不正確な表現をつかいますが) が、この変換作業を行っています。「IE(インターネットエクスプローラ)」や、「Safari」「FireFox」「Chrome」などのソフトウェア(もしくはアプリ)がこれにあたります。

HTMLを使う理由1: 情報量の圧縮

なぜこんなめんどくさいことをするのか。理由の一つは「情報量の圧縮」です。もし web ページの見え方をすべてそのまま画像にして、その画像情報を直接ネットワークで送ったら、今よりもたくさんの情報量(送受されるピット数)が必要です。実は web ページと言わず、文字ひとつにしても、この考えで送られています。文字を「見え方そのままの画像」として送るよりも、「文字番号(を表すビット列)」だけを送り、受信した側で画像に変換するほうが、ネットワーク上を送る情報量(ビット数)はぐっと少なくてすみます。

HTMLを使う理由2: 情報の抽象化

二つ目の理由は「情報の抽象化」です。ここはそれこそ抽象的な話題なので、すこしわかりにくいかもしれませんが、とても大事なところです。

「ことば」は、具体的なものそのものも表すことができますが、抽象的なカテゴリーや概念も表すことができます。この「抽象表現ができる」ことが「ことば」のもつ大きな力なのです。情報表現に「文字」を使うと「ことば」として表すことができ、「ことば」の持つ抽象化能力を駆使できるのです。ある三角形を画像で表すと、そのままではその具体的な三角形しか表すことができません。しかし言葉で「三角形」というと、多様な三角形を含むことができます。画像に抽象化能力を持たせようとすると、「この具体的な三角形の絵は、この三角形だけを表すのではなく、たくさんの三角形を表すものとする」という約束を作ることになり、それは具象表現である「画像」を、抽象表現の「記号」とすることです。これは「表意文字」誕生のプロセスそのものです。

HTML は、「文字」による「ことば」を使って web ページを表現しています。これによって、見た目そのものだけでは表現できないような、抽象的な「文書のなりたち」または「文書の構造」さらに「文書が表現しようとしている内容の構造」をも表すことができるようなります。

例えば、詳しくは後述しますが、HTML には <h1> というタグがあります。これはこのタグで囲まれている内容が「第1レベルの見出し」であることを示すタグです。これはまず囲まれている内容(の文字列)が、「見出し」という、文章構造上の特定の役割を担ったものであることを示します。この役割は「文章構造」という概念のなかの「見出し」という特定の役割で、これは概念上のものであり、抽象的です。そこにある具体的なひとつひとつの文字たちや、その色や形とは、本質的には独立です。

さらに、その「見出し」が「第1レベル」のものである、ということも表します。これは、ここであらわそうとしている文書が、見出しによって構造をもたされていて、その構造が「階層的」に整理されていて、その階層のうちで初めのレベルにある、ということを示します。これは具体例がわかりやすいでしょう。論文のような文書で、「2. 実験」という大きなまとまりの中に、「2.1 Aタイプの実験」「2.2 Bタイプの実験」「2.3 Cタイプの実験」という 3 つの部分があるとします。このうち「2. 実験」が第1レベルの見出しで、「2.1 Aタイプの実験」「2.2 Bタイプの実験」「2.3 Cタイプの実験」の3つが第2レベルの見出しです。

これはとりもなおさず、<h1> というタグは、上述の例の論文のように、「2」「2.1」「2.1.3」などと階層的に内容が整理された文書を表現するために使うものだ、ということを意味します。階層がはっきりせずあいまいだったり、階層の分け方にゆれがあって不統一だったりすると、どのレベルの見出しを使ったらよいのかわからなくなります。この状態は、もう HTML の問題ではなく「文書であらわそうとしている内容の構造化が甘い」という内容レベルの問題です。

<h1> タグで囲まれる内容はよく大きな文字で表示されますが、かといって<h1>タグは「文字を大きく表示する指示」ではありません。上述のように本来は文書構造を表すもので、具体的なフォントとか色とか大きさとかとは関係がありません。具体的な色とか大きさとかは、かつては HTML の中で混在して表していましたが、スタイルシートの導入により HTML から分離されて、CSS で指定するようになりました。HTML は本来の形に回帰し、文書構造のみを表すシンプルなものに戻りました。

HTMLを使う理由3: 情報の生成・加工・再利用

第三の理由は「情報の生成・加工・再利用がしやすいこと」です。

HTML が「文字のみ」で表現されていることの理由のひとつは、HTML 自身を生成するソフトウェアを作りやすい、ということです。この講座では、HTML を知るために、HTML を直接人間が書きます。しかし世の中にたくさんある、web の中で何かの処理をするもの、例えばブログとか、SNS の web 画面とか、web ショップ、web 上のお問い合わせフォーム、古くは web ベースの電子掲示板など、これらも画面が HTML で記述されているのは同じですが、その HTML はソフトウェアが生成しています。いまこのようなソフトウェアが生成する web ページはとても多く、おそらく人間が直接つくっているページよりはるかに多いでしょう。人間は HTML を作るソフトウェアを作っているのです。

人間はモノを作る際にも、初めは手で直接モノを作りましたが、そのうち道具を発明しました。「モノを作る道具を手で作る」段階です。しかしあるとき、この「道具」も、直接手で作らず、何かの道具を使って作った方が、より高度な道具ができることに気が付きました。「モノを作る道具を作る道具を手で作る」段階です。さらに、この「作る道具を」の繰り返しは 2 回に限らず何回でも繰り返せることに思い至りました。5回繰り返すと「モノを作る道具を作る道具を作る道具を作る道具を作る道具を手で作る」となります。こうなるともう最後の直接モノを作る道具は、とっても複雑で高度な道具になり、それによって作られるモノも、手ではとうてい作れないような複雑で高度なモノができてしまいます。高層ビル、宇宙ステーション、コンビュータ etc, etc。この繰り返しは「道具を作る道具」の発想がカギとなっています。

この発想を、「モノを作る道具」に対するのとおなじように、「情報を処理するソフトウェア」に対して適用します。「ソフトウェアを作るソフトウェア」ができれば、それを n 回繰り返せばとんでもなく高度なことができます。「情報を手で処理する」→「情報を処理するソフトウェアを手で作る」→「情報を処理するソフトウェアを作るソフトウェアを手で作る」→「情報を処理するソフトウェアを作るソフトウェアを作るソフトウェアを手で作る」→…。これを実現するには、情報を処理する主体である「プログラム (=ソフトウェア)」と、処理される対象である「データ」を、同じように扱う、すなわち、「プログラム (=ソフトウェア)」をデータとみなして、別のソフトウェアで生成・加工する、という考えと仕組みが必要です。

20世紀最大の天才の一人といわれるフォン・ノイマンが提唱したコンピュータの基本的な構成である「ノイマン・アーキテクチャ」を、現代のほとんどのコンピュータが採用しています。この構成(アーキテクチャ)では、プログラムとデータを同一のメモリ空間に置き、区別なく扱うことが可能です。これは「ソフトウェアを作るソフトウェア」が作りやすいということでも優れていると言えるでしょう。アプリケーションソフトウェアを読み込んで実行をそのアプリケーションに渡すオペレーティング・システム(OS)も「ソフトウェアを操作するソフトウェア」です。Windows や MacOS、モバイル機器の iOS や Android OS が実例です。

また、これらのソフトウェア自身を開発するプロセスでも、「ソフトウェアを生成するソフトウェア」が活躍します。C 言語などの人間に読みやすい形式の言語(高級言語)でテキストファイルに記述されたソフトウェアを、何段階かの処理をへて最終的に命令番号の羅列である「機械語での記述」に変換し、実行可能にするプロセスです。コンパイラやリンカと呼ばれるソフトウェアたちが、その仕事をします。

web ページと HTML の世界は、これらの OS や言語処理ほど複雑ではありませんが、何段階かの「ソフトウェアによるソフトウェアの処理」が可能です。HTML を生成する CMS やテンプレートエンジン、CSS を生成するソフトウェアなどがあります。

ソフトウェア開発での「ソフトウェアを作るソフトウェア」が扱うものは、最終的な生成物が「直接実行可能な命令番号の羅列」であるため、最終生成物のみならず中間生成物も、必ずしも「テキストファイル」だけで済ませることはできません。しかし、もし可能なら、そのような「ソフトウェアが読み込むための中間生成物」も、中の様子をある程度簡単に表示できて人間が解読できる方が、どのようなことが起こっているかを人間が把握するためにも、好都合です。これは開発の途中で、エラーや不具合などの原因を突き止めるときに、特に便利です。「文字」だけで構成される「テキストファイル」は、この目的にぴったりです。そのため、HTML は「文字」のみで記述できるように作られ、いざとなれば人間が直接読み、直接記述できるようになっています。

また、「HTML を生成するソフトウェア」を開発する時にも、扱うデータが「文字」のみであれば、それぞれのコンピュータ言語に備わる「文字列処理」のやりかたで、すべての処理を作ることができます。また「文字」であるため、処理の動きや問題点などを結果の文字で確認できます。これは開発の負担を大きく軽減します。

これらのことから、 web ページは HTML をテキストファイルに記述して伝送し、ブラウザが HTML を解釈して画面描画する、という仕組みで作られています。