HTMLの歴史を初心者向けに解説｜誕生からHTML5・現在の標準まで

HTMLを学び始めると、「いつ、誰が作ったの？」「HTML5が今も最新なの？」と疑問に思うことがありますよね。バージョン名やSGML、XHTMLといった言葉も登場するため、流れが分かりにくくなりがちです。

HTMLは、情報をリンクで結び付けて共有するために、Webとともに生まれたマークアップ言語です。1990年代から何度も改良され、現在は「HTML6」のように番号を増やす方式ではなく、継続的に更新されるHTML Living Standardとして管理されています。

この記事では、HTMLの誕生から現在までを初心者向けに整理します。年号を暗記するのではなく、「なぜ今の書き方になったのか」をつかんでいきましょう。

HTMLの歴史を年表で確認しよう
HTMLはWebと一緒に誕生した
1. 初期のHTMLは文書とリンクが中心
HTML 2.0からHTML 4.01まで標準化が進んだ
SGML・XML・XHTMLとHTMLの関係
HTML5でWebページからWebアプリへ広がった
1. 現在のHTMLは内容の役割をより詳しく表せる
現在の標準はHTML Living Standard
歴史を知ると現在のHTMLが理解しやすくなる
HTMLの歴史でよくある疑問
HTMLの正しい書き方を続けて学ぶ
参考にした公式資料
まとめ

HTMLの歴史を年表で確認しよう

まずは、大きな流れを1枚の年表で確認します。HTMLは文書とリンクを扱う小さな仕組みから始まり、画像・フォーム・動画・Webアプリケーションまで支える標準へ育ってきました。

1989年のWeb提案から現在のLiving Standardまでを示すHTMLの歴史年表

年	主な出来事	初心者が押さえるポイント
1989年	Tim Berners-Lee氏がWebを提案	離れた場所にある情報をリンクで結ぶ構想が始まります。
1991年	HTMLと最初のWebサイトが公開	見出し・文章・リンクを使う、Webページの土台ができます。
1995年	HTML 2.0	使われていたHTMLの機能が、RFC 1866として整理されます。
1997年	HTML 3.2	表や画像など、当時のブラウザで普及した機能が標準へ入ります。
1999年	HTML 4.01	CSSやスクリプト、アクセシビリティを意識した方向へ進みます。
2000年	XHTML 1.0	HTML 4.01をXMLの厳密なルールで書き直した仕様です。
2014年	HTML5	動画・音声・意味のある要素などが加わり、現在のWebへ近づきます。
現在	HTML Living Standard	固定された番号ではなく、標準が継続的に更新されています。

HTMLはWebと一緒に誕生した

HTMLの歴史は、World Wide Web（Web）の誕生と切り離せません。CERNで働いていた英国の科学者Tim Berners-Lee氏は、研究者同士が情報を共有しやすくするため、1989年にWebの仕組みを提案しました。

文書を別の文書へつなぐ「ハイパーリンク」、文書の場所を示すURL、データを受け渡すHTTP、文書の構造を書くHTMLなどを組み合わせた仕組みです。CERNによると、最初のWebブラウザは1990年に作られ、最初のWebサイトはWebプロジェクト自体を説明する内容でした。

初期のHTMLは文書とリンクが中心

初期のWebページは、今のような華やかなデザインを目的にしたものではありません。見出しや段落で情報を整理し、リンクをたどって別の資料へ移動できることが大切でした。

次は、初期のWebが重視した「文書とリンク」の構成を、現在のブラウザで見やすく再現した表示例です。歴史上のページをそのまま複製したものではありませんが、HTMLだけでも情報の順序とつながりを表せることが分かります。

この内容は、index.htmlへ次のように記述できます。周囲のブラウザ枠と読みやすい文字サイズは撮影用ですが、ページ内の見出し・文章・リンクは掲載コードと同じです。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>研究資料の案内</title>
</head>
<body>
  <h1>研究資料の案内</h1>
  <p>このページでは、研究チームの資料を公開しています。</p>
  <p><a href="#documents">資料一覧を見る</a></p>

  <h2 id="documents">資料一覧</h2>
  <ul>
    <li><a href="project.html">プロジェクト概要</a></li>
    <li><a href="links.html">関連する研究機関</a></li>
    <li><a href="contact.html">問い合わせ先</a></li>
  </ul>
</body>
</html>

h1とh2は見出し、pは段落、aはリンク、ulとliは箇条書きを表します。HTMLの役割が「見た目を飾ること」ではなく「内容へ意味と構造を付けること」だと分かる例です。

HTML 2.0からHTML 4.01まで標準化が進んだ

Webが広がると、ブラウザごとに異なる機能が増え、共通のルールが必要になりました。そこで、HTMLは個人の試みから、多くの開発者や組織が参照できる標準へ整理されていきます。

1995年：HTML 2.0

HTML 2.0は、1995年11月にRFC 1866として公開されました。HTMLが1990年からWebで使われてきたことを踏まえ、当時広く使われていた機能を整理した仕様です。

見出し、段落、リンク、画像に加え、入力内容を送信するフォームなどが定義されました。Webが「読む文書」から「利用者が操作できるページ」へ広がる土台になったと考えると分かりやすいでしょう。

1997年：HTML 3.2

HTML 3.2は、当時のブラウザで実際に普及していた表や画像の回り込みなどを取り込みました。一方、文字の大きさや色をHTMLタグで直接指定する書き方も多く、文書構造と見た目が混ざりやすい時代でもあります。

1999年：HTML 4.01

HTML 4.01は、1999年12月にW3C Recommendationとなりました。スタイルシート（CSS）、スクリプト、国際化、アクセシビリティへの配慮が強まり、HTMLは構造、CSSは見た目という役割分担が進みます。

現在は使わないfont要素やcenter要素を古いコードで見かけるのは、この時代まで見た目をHTMLへ直接書く方法が使われていたためです。新しくページを作るときは、文字色や中央寄せをCSSへ記述します。

SGML・XML・XHTMLとHTMLの関係

歴史を調べると、SGML、XML、XHTMLという似た言葉が出てきます。すべてを細かく覚える必要はありませんが、次の関係を知っておくと混乱しません。

SGML：文書へ印を付けて構造を表すための、汎用的な規格です。初期のHTMLからHTML 4.01まではSGMLの応用として定義されました。
XML：データを厳密なルールで記述し、交換しやすくするためのマークアップ言語です。SGMLを簡略化する形で設計されました。
XHTML：HTMLの要素を、XMLの厳密な構文で書けるようにした仕様です。XHTML 1.0はHTML 4.01をXMLとして再定義しています。

XHTMLでは、要素名を小文字にする、開始タグと終了タグを対応させる、空要素を閉じるなど、XMLの規則を守る必要があります。ただし、一般的なWebページをこれから作る初心者が、XHTMLから学び始める必要はありません。

HTML5でWebページからWebアプリへ広がった

2000年代に入ると、Webでは文章を読むだけでなく、動画の視聴、地図の操作、サービスへのログインなど、多くの機能が求められるようになりました。こうした実際の使われ方を踏まえて開発された大きな節目がHTML5です。

HTML5は2014年10月にW3C Recommendationとなりました。videoやaudio、描画に使うcanvas、そしてheader・nav・main・articleのように内容の役割を表す要素が整えられました。

現在のHTMLは内容の役割をより詳しく表せる

次の表示例では、サイト名とナビゲーション、記事本文、3つの説明をそれぞれ意味のある要素で組み立てています。CSSを組み合わせると、同じHTMLの構造を保ちながら見た目を整えられます。

index.htmlのbody内へ、次のHTMLを記述します。aria-labelは、ナビゲーションの目的を支援技術へ伝えるための補足です。

<header class="site-header">
  <strong class="site-name">Web制作ノート</strong>
  <nav aria-label="主要メニュー">
    <a href="/">ホーム</a>
    <a href="/articles/">学習記事</a>
    <a href="/contact/">お問い合わせ</a>
  </nav>
</header>

<main class="page-main">
  <article>
    <h1>現在のHTMLで作るページ</h1>
    <p>見出しや本文だけでなく、ヘッダー・ナビゲーション・記事などの役割を要素で表せます。</p>

    <div class="feature-grid">
      <section><h2>意味が明確</h2><p>内容の役割をタグで示せます。</p></section>
      <section><h2>端末に対応</h2><p>CSSと組み合わせて整えます。</p></section>
      <section><h2>機能を追加</h2><p>動画やフォームも扱えます。</p></section>
    </div>
  </article>
</main>

続いて、style.cssの末尾へ次のCSSを追加します。display: gridで3つの説明を横並びにし、画面が狭いときは1列へ切り替えます。

body {
  margin: 0;
  color: #172033;
  font-family: sans-serif;
}

.site-header {
  padding: 28px 44px;
  color: #fff;
  background: #1d4ed8;
}

.site-name {
  font-size: 26px;
}

.site-header nav {
  margin-top: 12px;
}

.site-header a {
  margin-right: 22px;
  color: #dbeafe;
}

.page-main {
  padding: 44px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.feature-grid section {
  padding: 24px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: #eff6ff;
}

@media (max-width: 700px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

HTMLは情報の意味と順序を担当し、CSSは色・余白・配置を担当しています。この役割分担は、過去のHTMLから現在へ進む中で特に重要になった考え方です。

現在の標準はHTML Living Standard

「HTML5が最新」と説明されることは今もあります。HTML5が現在のHTMLの大きな土台である点は間違いではありませんが、現在参照する標準はWHATWGが管理するHTML Living Standardです。

Living Standardとは、一度完成して固定するのではなく、ブラウザの実装や開発者からのフィードバックを受けながら継続的に更新する標準を指します。そのため、初心者が「HTML6の公開を待つ」という理解をする必要はありません。

W3CとWHATWGは2019年、HTMLとDOMについて1つの仕様を協力して開発することで合意しました。WHATWGがLiving Standardを維持し、W3Cも同じ開発の流れへ参加しています。

歴史を知ると現在のHTMLが理解しやすくなる

HTMLの歴史は、単なる年号の並びではありません。古いコードと現在のコードの違いには、それぞれ理由があります。

DOCTYPEが短くなった：現在は通常、先頭へ<!doctype html>と書けばHTML文書であることを示せます。
見た目はCSSへ分離する：fontやcenterのような装飾用要素ではなく、CSSで色や配置を指定します。
意味のある要素を使う：headerやmainなどで役割を示すと、人にも検索エンジンにも支援技術にも構造が伝わりやすくなります。
ブラウザ間の互換性を重視する：標準とテストが整備され、同じコードを複数のブラウザで扱いやすくなりました。

HTMLの歴史でよくある疑問

HTMLを作った人は誰ですか？

Webの発明者であるTim Berners-Lee氏です。CERNで研究者の情報共有を改善する仕組みとしてWebを考案し、その構成要素としてHTMLを作りました。

HTML5はもう古いのですか？

HTML5で導入・整理された考え方や要素の多くは、今も使われています。ただし「HTML5という固定版だけが最新」というより、現在はHTML Living Standardが継続的に更新されている、と理解するのが正確です。

初心者は古いバージョンも勉強するべきですか？

HTML 2.0やXHTMLの細かな構文を順番に学ぶ必要はありません。まずは現在のHTMLで、見出し・段落・リンク・画像・フォーム・意味のある要素を正しく使う練習を優先しましょう。

HTMLの正しい書き方を続けて学ぶ

歴史の流れが分かったら、次は現在の基本文法を実際に書いてみると理解が深まります。開始タグと終了タグ、属性、入れ子などは、次の記事で初心者向けに確認できます。

HTMLの基本文法を初心者向けに解説｜タグ・属性・入れ子と基本構造

参考にした公式資料

まとめ

HTMLは、研究資料をリンクで結んで共有するためにWebとともに誕生しました。HTML 2.0、HTML 4.01、XHTML、HTML5と改良や試行を重ね、現在はHTML Living Standardとして継続的に更新されています。

これから学ぶときは、古いバージョンを暗記するよりも、HTMLで意味と構造を示し、見た目はCSSで整える現在の基本を大切にしてください。歴史を知っていると、短いDOCTYPEや意味のある要素が使われる理由も納得しやすくなります。