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の仕様の変化に対応した柔軟な対応が求めれていた流れが再認識できました。

関連記事

【CSS】スタイルシートだけで縦方向と横方向でセンタリングする方法

WEBデザインで画像やレイアウトした要素を中央に揃えるレイアウトを作ることがよくあります。実際にHTMLにコーディングをするときに、横位置をセンターにする場合や、縦位置をセンターにする場合などCSSだけで実現する方法をまとめてみました。 { margin: 0 auto...続きを読む

2015.02.07HTMLコーディング

【デザイン】シングルページデザイン海外のクリエイティブWEBサイトまとめ

シングルページデザインは、1ページ内に「お知らせ」「コンセプト」「サービス紹介」「会社概要」「お問い合わせ」などのサイトを構成する一般的な情報をすべて集約したデザインです。従来サイトで、訪問者がページを見て必要な情報が無いと判断して離脱してしまうことを防ぐことから設計されたデ...続きを読む

2015.02.16インスピレーション

ロリポップの簡単インストールで「WordPress」のインストールに失敗した!?

WEBサイトを構築・公開するために必要となるレンタルサーバー。数あるレンタルサーバーの運営サービスで、価格も手ごろなロリポップを利用する方も多いと思います。ロリポップではWordPressを簡単にインストールすることができますが、簡単インストールの途中で「インストールできませんで...続きを読む

2017.09.17WordPressレンタルサーバロリポップ

【WP】管理画面をカスタマイズできるプラグイン「AG Custom Admin」

今回紹介するプラグイン「AG Custom Admin」を使用すると、WordPressの管理画面のログイン、メニュー項目、ダッシュボードなどをカスタマイズできるようになります。 ダッシュボードなど個々にカスタマイズできるプラグインなどはありますが、「AG Custom A...続きを読む

2016.07.08WordPress

【CSS】スタイルシートが適用される優先順位について

WEBサイトのデザインでは定番になっているCSS(カスケーディング・スタイル・シート)。最近では、CSSで出来ることも多くなり、自然と記述する内容を多くなってきています。また外部のライブラリーなどを読み込むとCSSのボリュームが増えます。 そうなると、同じ名前の宣言で異...続きを読む

2015.02.06HTMLコーディング