HTML文章の歴史を振り返る

WEBサイトの制作において基礎となるのは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)略称をHTML(エイチティーエムエル)と呼ばれる、拡張子が.htmlや.htmなどであらわされる文章ファイルです。

WEBサイトの制作に関わる人にとって当たり前となっているHTMLですが、1993年の登場から現時(2013年)でにいたるまでの間にHTMLのバージョンが変わり、その変化に合わせWEBサイトの作りも移り変わっています。

今回は、HTML文章の歴史を振り返りながら、トレンドなっている今のWEBサイトの制作の中身をまとめてみたいと思います。

HTML 1.0

1990年、World Wide Webシステムのための最初のサーバとブラウザが完成した年であり、HTMLの仕様をまとめようという動きがが検討されました。1992年には日本で最初となるホームページが登場しました。

1993年6月IIIR Working Group より提出されたインターネット・ドラフトをHTML1.0と呼び、初めて一般に公開されたHTML仕様書と言われています。今でもWorld Wide Web Consortium (W3C)のサイトでHTML仕様書の内容をみることができます。

仕様書をみてみると基本構造に始まり、見出し、段落などの文書構造のための要素や、リンクなどが登場しているのがわかります。

<HTML>
 <TITLE>
  A sample HTML instance
 </TITLE>
 <H1>
  An Example of Structure
 </H1>
 Here's a typical paragraph.
 <P>
 <UL>
  <LI>
  Item one has an
  <A NAME="anchor">
   anchor
  </A>
  <LI>
  Here's item two.
 </UL>
</HTML>

シンプルでHTMLの原型という感じです。このHTML1.0は、携帯電話でのインターネットデータ通信「iモード」で採用されていました。

HTML 2.0

1995年IETFのHTMLワーキンググループによってHTML 2.0(RFC1866)が発行。HTML 2.0では文法宣言やHEADタグ、インライン画像、フォームの機能などが加わっています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML//EN">
<HTML>
  <HEAD>
    <TITLE>Structural Example</TITLE>
  </HEAD>
  <BODY>
    <H1>First Header</H1>
    <P>This is a paragraph in the example HTML file.</P>
  </BODY>
</HTML>

Windows95の登場もあり、一般個人でのインターネット利用が広まった年です。ホームページもHTML2.0がスタートスタンダードとして広まりました。ホームページでの表現力も格段に向上してイギリスのネットクラフト社の調査によると、1995年8月にはインターネット上のサイト数は約1万8000サイトあったといわれています。

また1995年はJavaScriptも登場し、JavaScriptはNetscape Navigator 2.0に実装、Internet Explorer 3.0には JScript、Visual Basic ベースの VBScript、CSS の一部をサポートするという、Netscape と Internet Explorerのブラウザ闘争も本格化した様相です。

日本国内では、1996年ホームページ・ビルダーのV1.0が発表されました。日本でウェブサイトのことを「ホームページ」という名称で広まっていますが、「ホームページ」はWEBサイトの最初のページのことを指すものでしたので、「ホームページ」は正しい名称の使い方ではないことも有名な話だと思います。

HTML 3.2

1997年1月にW3C勧告としてHTML 3.2の仕様が発表されました。HTML 3.2では表組や装飾や、JavaアプレットなどHTTPを利用しないオブジェクトさえも Webページで利用できるようになりました。

同時期に Macromedia Flash 2 が登場し、メディアファイルやアニメーションがWEBサイトに組み込まれダイナミックな表現のWEBサイトも登場しました。

HTML 4.0、HTML 4.01

1997年12月にW3C勧告としてHTML 4.0の仕様が発表されました。HTML 4.0の仕様に修正を加えたHTML 4.01が1999年12月にW3C勧告となりました。
このころより、Netscape Communicator 4.0、Internet Explorer 4.0 にスタイルシートや、ダイナミックHTML機能をサポートされたこともあり、整形処理は スタイルシートを利用し、文書をより構造のみを記述するのが推奨されています。

ISO(国際標準化機構)では、このHTML 4.01を参考にし、より厳密に規格化された仕様が規格され、日本でもJIS X 4156:2000というJIS規格になりました。

また、1999年 Internet Explorer 5.0 がリリースされシェアもNetscape のシェアを上回るようになりました。Windowsが世界的にシェアを広げ、90年代には95%も迫っていたといわれています。

WEBサイトの制作において、HTML4.01の仕様、Internet Explorerの表示環境が現在にも通じる基準となったといえそうです。

XHTML1.0

2000年1月にHTML4.0(HTML4.01)の仕様を、XMLの柔軟性、拡張性を取り入れてたXHTML1.0がW3Cより勧告されました。

XHTMLが登場した背景には、HTMLの源流となるSGMLが開発当時(1980年代)の課題、異なる機種間での文書のやり取りがスムーズに行えず課題解決に費やす労力削減のため、環境に依存せず読み込みと認識が可能となる規格が必要があったことに原点回帰する考えがあったと思います。規格を厳格にして「論理的な構造」を明確にして効率的に利用できるようにすることだといえそうです。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
 Strict//EN" "DTD/xhtml1-strict.dtd"> <!--1行で記述する  -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Structural Example</title>
</head>

また、PDAなどの小型端末を考慮し、携帯端末やテレビから通常のPCまで幅広い環境で利用できるXHTML Basicが2000年12月に勧告されています。

XHTML1.1

2001年5月W3CよりXHTML1.1が勧告されました。XHTML 1.0は、HTMLで書かれた既存コンテンツのXHTMLへのスムーズな移行を第一の目的としていましたが、XHTML 1.1は多様なデバイスや環境に柔軟に合わせた独自のタグセットを設計できるモジュール化という考え方が取り入れられ設計がされています。

XHTML 1.1ではHTML4で使うべきではない要素とされるタグが排除されてしまっています。そのためXHTML1.0 にあった厳密型(Strict), 移行型(Transitional), フレーム設定型(Frameset)という概念は無くなり、W3C の仕様において「推奨しない」とされる要素や属性、さらにフレーム機能用の内容は一切使えなくなってしまいました。

HTML4.0(HTML4.01)で制作されていたWEBサイトをリニューアルする際に、XHTMLへ移行することがよくありました。XHTML 1.1だと表示が崩れたり使えなくなるため「XHTML 1.0 Transitional」でまとることが多かったです。

2001年~2010年のWEBサイトの制作は、HTML4.01、XHTML1.0、XHTMLBasicにCSS、Flash、javascriptを加えた制作で安定期をむかえていたと思います。

HTML5草案

振り返ると2008年は変革の年だったかなと思います。HTML5とCSS3の草案が発表され、Googleが独自のブラウザ「Google Chrome」の正式版を公開、iPhone 3G 、Android携帯が登場したことで、WEBサイトの制作も多様化しました。

2010年以降は、制作基盤が主流となっていたXHTML1.0、XHTMLBasicからHTML5+CSS3へ移っていく時期かと思います。

こうして歴史を振り返ると制作者はHTMLの仕様の変化に対応した柔軟な対応が求めれていた流れが再認識できました。

関連記事

【デザイン】印象に残るビジネスカードデザイン

名刺は自分たちのことを覚えてもらうために重要なビジネスツールです。そこで受け取ったら印象に残るであろうデザインのビジネスカードを集めてみました。 Tok&Stok(Business Card) ブラジルの家具メーカー「Tok&Stok」のビジネスカード...続きを読む

2015.02.15インスピレーション

【WP】WordPressで出力されるHEADタグ内の内容を整理する

WordPressを利用してWebサイトを構築すると、HTMLを構成するHEADタグ内にWordPress特有の記述が見れます。このWordPress特有の記述は自動的に生成されるため、テーマファイルのソースに記述されているheadタグ内の内容を編集するだけでは変更することができ...続きを読む

2021.01.28HTMLコーディングWordPress

【HTML】Bootstrap フレームワークを使い作成するレスポンシブサイト

Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応...続きを読む

2015.02.06BootstrapHTMLコーディング

【WP】WordPressテーマファイルのページ階層早見表

WordPressでサイト構築するために必須となるテーマ。初めてWordPressのテーマのファイルをみるとそれぞれのファイルがどのように関連してサイトが構築されているのか難しく感じるかもしれません。 テーマをカスタマイズしたいとき、テーマを利用したいとき、テーマをより深く...続きを読む

2016.07.03WordPress

【JavaScript】ページの読込状況を表示するプログレスバーを実装する『PACE』

WEBサイトのページを読込とき、読込むファイル数が多かったりライブラリを参照することでページの読込が完了するまでに時間がかかる場合があります。 読込時間が長いページを制作する場合は、読込状況を視覚的に表示することができるプログレスバーを設置すると閲覧する方に親切になると...続きを読む

2015.02.10HTMLコーディング