世界中の情報整理を後押ししたHTMLの進歩

2017年07月05日
2018年07月24日
#HTML
#WEBサイト
#ブラウザ

ウェブにおける代表的な言語の一つにHTML（ハイパーテキスト・マークアップランゲージ）があります。ウェブの代表的な言語は他にPHPやRuby、Javaがありますが、これらはプログラミング言語に分類されます。
一方でHTMLはマークアップ言語に分類されます。そもそも同じウェブ言語ですがプログラミング言語とマークアップ言語では役割が違ってきます。

今回は、以下の5つのポイントに沿ってお伝えします。

・HTMLは文章構造を担う言語である
・HTMLはもともと非公開の中、ある研究機関で使われていた
・WWWの生みの親ティム・バーナーズ・リーはHTMLも開発していた
・最新のHTML5では動的な動きが可能になる
・HTMLがもたらした最大の功績はリンクによるページ移動である

マークアップ言語とは?

マークアップ言語とは文章を構造化するための言語です。
「タグ」と呼ばれる印のようなものを使って文章構造を構築し、ユーザーがページを見た時に読みやすくするのがHTMLの主な役目です。
ウェブ制作をする人が最初に学習する言語はたいていがこのHTMLです。ウェブ技術の中では基礎中の基礎になります。

HTMLはもともと狭い範囲で使われていた

HTMLはスイス・ジュネーブにあるCERN（欧州原子核研究機構）で生まれました。
このCERNはかなり巨大な研究施設で、この中では数千人の研究者が物理や情報技術を研究しています。

CERNでは膨大な研究と共に膨大な研究成果が論文として残されていて、多くの研究者が在籍しているため生まれる論文の数はかなりの量になります。
もともとはこの膨大な論文を簡単に管理するためにサーバーとブラウザ、HTMLが生み出されました。
HTMLファイルに記述した論文をサーバーに保存しておけば、ブラウザ経由で簡単に論文情報を取得できたため論文を探す手間が一気に短縮されました。
さらにリンクという技術を使えば別の論文へのアクセスが容易になったので一層論文を探す手間が削減できるようになりました。

これがHTMLの始まりです。HTMLはもともとCERN内で使う目的で開発されたマークアップ言語であり、公開目的で開発された言語ではなかったのです。

※CERNのWEBページ「The birth of the web」より　https://home.cern/topics/birth-web

HTMLの歴史～生みの親とHTML5までの進化~

HTMLを語るうえで忘れてはいけない人がいます。それがCERNに所属していたティム・バーナーズ・リーです。
この方はイギリス出身の科学者ですが、世界中を繋ぐWWWの考案者であり、世の中で広くHTMLを使えるようにした人です。
このティム・バーナーズ・リーが考案したHTMLは時間の経過とともに優れたマークアップ言語になっていきます。

HTMLのバージョンアップの歴史

HTMLの歴史はHTML1.0から始まります。この時のHTMLは日本語に対応しておらず、日本語はHTML2.0から使用が可能になります。
その後、HTML3.0、HTML4.0と続きますが、HTML1.0が発表されたのが1993年、HTML4.0は1997年なのでこの間、いかにスピーディーにバージョンアップが行われたのかが分かると思います。
HTML4.0の時点でホームページ制作に必要なタグはほぼ出揃うことになります。リンクで別のページに飛ぶことができ、文章構造も明確になり、画像をHTMLの中に埋め込むこともできるようになっています。
そのため、しばらくはこのHTML4.0からのバージョンアップは見られませんでしたが、2014年にHTML5.0という久々のバージョンアップが行われました。

APIの追加による拡張性

さらにAPIが追加された点も大きな変化です。
代表的な機能は位置情報の取得です。GeolocationAPIと呼ばれる位置情報を扱うAPIが追加されたことで簡単なウェブアプリケーションが構築できるようになりました。
プログラミングの知識がなくても簡易な実装が可能になったのです。

このように数十年の年月をかけて使いやすさを増しているHTMLですが、これはある団体の功績によるところが大きいことを忘れてはいけません。

ウェブ技術の標準化を目指す非営利団体：W3C

HTMLに記述するルールはW3Cという非営利団体が作っていることをご存知でしょうか。
この団体もティム・バーナーズ・リーによって創設され、HTMLを含めたウェブ技術のルールを作っています。
なぜルール作りが必要なのかというところですが、WEBページを閲覧するソフトのウェブブラウザは、Internet Exproler（IE）、google chrome、safari、Mozilla Firefoxなど様々です。
同じHTMLファイルを読み込む場合でも、IE経由では正常に表示されてもgoogle chrome経由だと画面が崩れてしまう、といったトラブルが発生してしまいます。
なぜブラウザが違うと見え方が違うのか、という理由は、OSやブラウザの開発思想、およびレンダリングエンジンの違いによります。実際に画面に表示する文字や画像などの配置を計算するプログラムが違うため、IEでは表示されてもchromeでは表示されない、といった現象が起こることがあるのです。

このようなトラブルを未然に防ぐためにW3Cがウェブ技術のルールを作っています。これによりウェブ開発者の余分な負担を減らすことができます。

HTMLソースの記述方法

HTMLの記述はとてもシンプルです。最初はDOCTYPE宣言からです。これは「今から○○バージョンのHTMLで文章を記述します」という宣言です。
この宣言によりどのバージョンのHTMLでソースを書いてあるかをブラウザに教えています。

最新のHTML5の宣言は、

<!DOCTYPE html>
で宣言できます。

以前のHTMLバージョンはこの宣言が冗長でしたが、HTML5ではかなりシンプルな宣言になっています。
DOCTYPE宣言の後は、<html>～</html>タグで全体を囲います。
そしてこのhtmlタグの中にheadタグとbodyタグを入れていきます。headタグとは文章全体の情報を記述する所で読み込むCSSファイルやJavaScriptファイル、titleタグをここに記述します。
表には出ない裏方的な内容をこのheadタグ内に記述します。一般ユーザーが閲覧することはほぼないですが、ページ内容を端的にブラウザや検索エンジンに知らせる重要なタグです。

一方body要素はユーザーに見てもらいたい内容を記述します。このbody要素に記述したことがユーザーに情報として伝わります。
Body要素内に記述するタグは見出しタグや改行タグ、テーブルタグなどがあります。見出しタグは<h1>に始まり、<h2>、<h3>、<h4>、・・・とあり、h1が大見出しです。hタグは数字が小さい方が見出しの意味は大きくなります。
改行タグは<p>や<br/>があります。適切なところで改行タグを入れると文章がとても見やすくなります。
テーブルタグは<table>があり、表示項目を区切って表示させます。テーブルタグは表形式で内容を表示するのに役立ちます。
なお、ブラウザでWEBページのソースを表示することができます。右クリックして「ページのソースを表示する」を選択してみてください。今見ているページの裏側を見ることができます。

HTMLがもたらした最大の成果はリンク

HTMLがもたらした最大の成果はなんでしょうか。実は、ウェブ上できれいなデザインを表示することでもないし、画像や動的ファイルをアップロードできることでもありません。
もちろん、これら機能はとても価値がありますが、最大の成果はリンクです。
リンクとは、予めリンクタグが埋め込まれた文字列をクリックすると別のページに移動できる機能のことです。
ウェブサイトを見ていると良く見かけると思いますが、実はこのリンクこそがHTML最大の成果と言えます。
この機能のおかげで世界中の情報が整理でき、また簡単に世界中の情報にアクセスできるようになったのです。
リンク機能が情報化社会を急速に進歩させ、情報の在り方に変化を与えました。

HTMLのまとめ

もともとは研究機関の情報整理用に生み出されたHTMLは、今や世界中のウェブ関係者誰もが知るところになりました。
さらにウェブ関係者に限定せず、情報の簡易取得という点では世界中の多くの人々がHTML普及の恩恵を授かっていることでしょう。
当時のティム・バーナーズ・リーはおそらくここまでHTMLの広がりを予想していなかったでしょうが、HTMLによって世界は繋がり、世界中の情報は整理されることになったのです。