HTML講座

この講座は、HTMLを誰にでも書ける、身近なモノとして感じてもらえるようにということを意識して構成しています。
そのため、一般的にHTMLを解説しているサイトとは、アプローチの仕方が異なります。
この考え方は、HTMLを書き続けて２５年の筆者の考え方でもあり、これを理解することが出来れば、HTMLの原点を完全に理解できるようになると信じてやみません。

HTMLの歴史

HTMLは元々SGMLというマークアップ言語から生まれたものです。
マークアップ言語が生まれた背景は、WEB上でやり取りするテキスト情報を、誰が見ても、同じ構造を持った文章として共有できないか？という発想から生まれました。

元々は、印刷物を元に、本のタイトルだったり、見出しだったり、本文、目次だったり、Aさんが意図した情報を世界中の誰もが共有できるようにするためのものです。実際の用途としては学者の論文を学術文章として提供することを目的として生まれ、あらゆる業界で利用できるようにと研究されました。

SGMLは用途が、限定されていなかったため、学術文章だけにとどまらず、天気、ニュース、楽譜などの情報を共有できるように研究されたようです。
よく考えられた言語ではあったのですが、アーカイブ（データベース）としての扱いと、表示させる部分（出版物）とが同居していたために、その扱いが複雑すぎて、簡単に書くことが出来ないという難点がありました。

そこで生まれたのが、SGMLを印刷物と同じように表示させるために用途を絞りこみ、書き方の約束を決め、誰もが同じように書くだけで、同じように表示できるブラウザであれば、ほぼ、同じように表示してくれるようにしたものがHTMLです。私たちは、その恩恵を受けている訳です。
※余談ですが、アーカイブ（DB）として保存できるように、拡張可能なマークアップ言語として生まれたのがXMLです。

ハイパーテキストとは

さて、HTMLはハイパー・テキスト・マークアップ・ランゲージの頭文字をとったものなのですが、テキスト（印刷物）を超えた、構造化（マークアップ）するための言語（ランゲージ）という意味あいを持ちます。

印刷物（書籍など）とHTMLとの決定的な違いは、なんでしょう？

印刷物を読んでいて、この言葉の意味はなんだろう？と思った時に、印刷物には「＊」などを付記して、下に説明などを載せるのに対し、HTMLでは、マウスでクリックするだけで、その参照先のページを表示してくれたり、移動してくれたりします。こういうものを、リンクと呼び、印刷物とは決定的に違うものです。
私たちが、普通にリンクと呼んでいるものを、元々、ハイパーリンクと呼んでいて、ワードやエクセルなどでは、今でも普通に使われている言葉です。

このハイパーテキストを扱う、構造化（ここが見出しで、これが文章で、これが表組で）することが出来る言語（タグで挟むことで実現する）という風に呼ばれるようになったものです。

１０個も使えれば十分

HTMLの勉強をすると言うことは、ぱっと見て、そのタグが何を表しているものかを理解できるということではありません。
この文章を、どの階層に当てはめれば良いのか？を理解できることです。いくつかのルールはありますが、想像しているよりもずっと簡単です。

タグを見ると、最初は、何やら、ごちゃごちゃ書いているように見えてしまい、混乱してしまいがちですが、普通に、使用されているタググループの数は、10個程度です。それ以外は、必要に応じて、少しずつ覚えて行けばよいですし、必ずしも、どのように分類してよいのか迷った時には、汎用性のある２つのタグ（divとspan)を使えば事足ります。

HTMLを書く時、大抵の場合ホームページを作るために書くもので、論文を構造化しようとしている訳ではないので、仮にAさんの理解と、Bさんの理解が、違っていたところで、ほぼ何の影響もないと思って間違いありません。極端な話、訪問者に対し、デザイナーが意図したとおりに閲覧させることが出来ていれば、すべてdivタグとspanタグだけのたった二つのタグだけ書かれていても間違いではありませんし、そのように書くことも可能だったりするのが、HTMLでもあります。

ただ、HTMLを書き分けた方が便利でシンプルになります。そして便利なものを利用しない手はありません。
この講座は、そういう視点から、HTMLを覚えて行くことで、HTMLを便利なものとして身近に感じてもらえるようになることを意識して書いていきます。

それでは早速始めましょう