こんにちは。
ブログの更新がいきなり滞り、管理担当者からの見えない圧に怯える日々を過ごすaradas東京のfcです。
前回のインターネット、Web業界の歴史ざっくりまとめ【Vol.1 インターネット編】に引き続き業界の歴史をWeb制作の観点から振り返ってみたいと思います。
HTMLの歴史
簡単にHTML歴史を振り返ってみたいと思います。
そもそもHTMLとは何なのか？
HTMLはHyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページ（ハイパーテキスト）を記述するためのマークアップ言語です。
ハイパーテキストとは複数のテキスト（文章）を関連付け・結びつける仕組みで、実際に結びつけるものをハイパーリンク（一般的に言うリンク）と言います。そしてマークアップ言語とは文章構造などを記述するための言語です。
HTML自体はそれ以前にあったマークアップ言語のSGMLをベースとして、ティム・バーナーズ＝リーさんによって考案されました。当初は科学文書（論文など）の記述を主に想定されていました。そこからWWW（インターネット）の進化とともに、HTML2.0、HTML i18n、HTML 3.2などのバージョン変更（中には日本語が使えないものもあった）を続け、1997年のHTML4.0に正式に勧告されました。
XHTMLの登場
まず、インターネットでの情報交換のデータフォーマットとして、XML（Extensible Markup Language）がSGMLのサブセットとして確立されました。XMLはできるだけ簡素で厳密な記述のマークアップ言語を目指し標準化されました。
そして、そのXMLをベースとして定義されたのがXHTMLで、2000年にW3CによってXHTML 1.0が勧告されました。XHTMLはHTMLの曖昧な部分を排除し、より強い約束（定義）がなされたマークアップ言語となりました。例えばHTMLではpタグやliタグなどのとじタグの省略が可能でしたが、XHTMLでは閉じタグは必須となりました。
HTML5への進化
XHTMLの登場以降、HTMLとXHTMLが長く併用されました。そしてWebはどんどん普及、進化していきます。Webページはただ文章構造を記述するだけではなく、視覚的に多彩になり、アプリケーションのUIとしての役割も求められるようになっていきました。
しかし、HTMLはそもそも科学文書などの記述を元に考案されていたため、HTML4系やXHTMLではインタラクションやUIを盛り込んだWebページやアプリケーションを構成するためには既存のままでは難しくなりました（そのため、HTMLでできないことを実現するためにFlashが流行する時代が訪れましたが、それについてはまた別の機会に）。そこで、HTMLのタグやAPIの見直しと追加、曖昧だった仕様を改めて定義するなどして、前世代より大幅に改定され誕生したのがHTML5です。
主な改定内容として、header、footer、nav、video、canvasのようなタグの追加や、File、Drag&Drop、Web Storage、Web Workers、Web Socket等々の現在では当たり前となっているAPIの追加などがあります。
HTML5はW3Cにより2008年に草案が発表され、2014年10月28日に正式に勧告されました。2019年7月現在はHTML5.2が最新となります。
HTMLコーディングの変化
Webの技術の進化とともに当然HTMLコーディングも変化していきました。
HTMLコーディングと言うとHTML、CSS、JavaScriptで記述してWebページを作成することですが、今でこそHTMLならばJade等、CSSならSass等、JavaScriptならTypeScript等のメタ言語がありますが、そういった周辺技術登場のはるか昔、現在のHTML、CSS、JavaScriptという根本的なこのスタイルに至るまでにあった大きな変化についてを簡単に紹介したいと思います。
テーブルレイアウトとインラインスタイルによる装飾
2000年代半ばまで、Webページのコーディングにはテーブルレイアウトというものが使われていることが多くありました。
テーブルレイアウトとは、ページのレイアウト自体をtableタグで行うものです。HTMLのtableタグは本来は表を表現するためのタグですが、それを要素のレイアウト（配置）自体に使うというものでした。また同時に、テキストのサイズや色、その他装飾などをfontタグを用いたりして、すべての見た目の表現をHTML内の装飾タグやタグ内にインラインで記述していました。
装飾コードの外部リソース化（CSSファイルの導入）
HTML内に装飾に関するコードを書いた場合、本来HTMLで伝えるべき情報として記載するものの中に、そのコンテンツと無関係の記述でHTMLコードが溢れてしまいます。なおかつ更新時における見た目の調整もHTMLで行うため、同一の見た目のページであっても、それらすべてのページの該当箇所を修正していく必要があり、メンテナンス性も非常に悪いものでした。
tableでレイアウトされて本来の意味とは違う形のマークアップをされた文章と、それらの情報には無関係の装飾に関する情報が混在するHTMLはまさにカオスです。それを解決するためにCSS（カスケーディング・スタイル・シート）が登場しました。厳密には、CSS自体は1994年とその当時から見ても遥か以前に提唱されたものですが、それを積極的に採用すべきという流れになったのが2000年代半ばでした。
CSSの採用により装飾関係のコードが外部リソースファイルへと分離され、サイト内共通の装飾はCSSファイルの編集で一元管理できるようになりました。すると、HTMLのコードの見通しが良くなり、それと同時に、HTMLは本来のタグの役割の上でマークアップすべきというセマンティックマークアップという考えが徐々に広まりだし、セマンティックマークアップを考えるとHTML4時代のタグだけでは足りなすぎるということで、HTML5の仕様策定へと進んでいくのでした。
外部のCSSを読み込むというのはその分だけサーバーへのリクエストが増えることになるため、通信環境のことを考えると当初はインラインで記述していたこともその時代に適応していた手法であり、外部CSSを使用するようになったのもADSLが普及して通信環境が良くなったタイミングであるため、やはりWeb業界は通信インフラやハードなどの革新の影響を多大に受けていることがわかります。
iframeレイアウト
加えてテーブルレイアウトが使われていた当時（特に2000年代初頭）までのWebサイトで多く見られた手法として、iframeによるレイアウトがありました。iframeによるレイアウトとは、headerやfooter、サイドメニューなどのサイト全体の共通パーツを別のHTMLファイルとして用意し、それを各ページではiframeでそれぞれのパーツを読み込むスタイルです。
iframeレイアウトによりサイト内で共通要素を1ファイルで管理することができました。SSI（Server Side Incude）などの技術は古くからありましたが、それにはサーバー側の設定が必要なこともあり、HTMLのみで簡単に実装できるiframeレイアウトが採用されました。ただ、採用事例としては徐々に個人制作のようなサイトへと縮小していき、プロの制作物ではDreamweaverのテンプレート機能などの採用が多かった印象です。
阿部寛オフィシャルWebサイトについて
これらのtableレイアウトやインライン装飾、iframeレイアウトなど古き（良き？）時代の懐かしきWebページを2019年の現在も採用し続けている有名なサイトとして俳優の阿部寛さんのオフィシャルWebサイトの「阿部寛のホームページ」があります。
©阿部寛のホームページ
年齢や業界歴がバレる踏み絵になるサイト
「阿部寛のホームページ」、これを見て懐かしいと思ったあたなたはおっさん＆おばさんです。ノスタルジーに浸りましょう。
これを見て「？？？」となった若い世代の人たちは、是非ともソースコードを開いてその目で見て、先人の足跡を辿ってみてください。
阿部寛のホームページは素晴らしきWebの歴史遺産
1ファンの方が趣味で始められた阿部寛ホームページが時を経て所属事務所公認となり、いつのまにかオフィシャルホームページとなっている「阿部寛のホームページ」。Web黎明期の形を残す証左として、日本のWebクリエイティブの歴史遺産として、末永くこのまま運用されていくことを切に願っております。Webクリエイターのはしくれとして敬意を評し、陰ながら応援しております。
阿部寛オフィシャルWebサイト 「阿部寛のホームページ」
http://abehiroshi.la.coocan.jp/
※当時の趣味サイトのテンプレはこれにアクセスカウンターと掲示板がありました。キリ番ゲットぉぉぉ！
まとめ
阿部寛さん主演の「結婚できない男」は名作です。このドラマは弊社東京オフィスの前でもロケが行われていたようです。そして、13年ぶりの続編が2019年中に放送予定とのことです。個人的には六本木ヒルズでプライベートの阿部寛さんをお見かけしたこともあり、勝手に変な縁を感じている次第です。
最後は唐突な阿部寛と阿部寛のホームページ推しとなってしまいました。阿部寛さん、所属事務所の方および関係者の方々、弊社で何かお力になれることがございましたらお気軽にお声がけいただけますと幸いです。
というわけで、日本の古き良きWebページを見たい方は阿部寛オフィシャルホームページをご覧いただき、Webの歴史を感じ、Webの未来に想いを馳せ、また明日からより良いWebを作っていきましょう！
