見出し画像
Photo by potto_de_ponto

HTMLの歴史

KoenigWolf

Webの誕生

CERN

ある時、1989年の寒い冬の日、スイスのCERN（欧州原子核研究機構）で働いていた34歳のイギリス人エンジニア、ティム・バーナーズ＝リーは、科学者たちが情報をもっと簡単に共有できる方法を模索していました。

ティム・バーナーズ＝リー

彼が夢見たのは、異なるコンピュータ間で情報を繋ぐ「ハイパーテキスト」システムです。これが後に「ワールド・ワイド・ウェブ」として知られるものの始まりでした。

HTMLの誕生

ティムはそのために、情報を標準化された方法で表示するための言語を作り上げました。それが「HTML（HyperText Markup Language）」です。1991年に最初のバージョンが提案され、ウェブの基本要素として登場しました。初期のHTMLは非常にシンプルで、約20のタグしかありませんでした。例えば、文書の見出しを示す`<h1>`タグや、段落を示す`<p>`タグなどです。この時点でHTMLはCERN内で最初に使われ、スイスがその発祥の地となりました。

初期のHTMLとその進化

1990年代に入り、Webの人気が爆発的に拡大すると、HTMLも進化していきました。1995年に発表されたHTML 2.0では、フォームやテーブルの要素が追加され、ウェブページの機能が大幅に向上しました。この時点で、HTMLは単なる情報表示のツールから、インタラクティブなウェブアプリケーションを構築する基盤へと変貌を遂げました。

CSSとJavaScriptの登場

HTMLは文書の構造を定義するのに適していましたが、デザインや動的な動作には限界がありました。この問題を解決するために、1996年にはCSS（Cascading Style Sheets）が導入され、HTML文書のスタイルを外部から制御できるようになりました。同じく1995年にはJavaScriptが登場し、ウェブページにインタラクティブな要素を追加することが可能になりました。これにより、ウェブはますますリッチでダイナミックなものになっていきました。

HTML5モダンウェブの礎

2010年代に入ると、ウェブ技術の進化に伴い、HTMLも大きな変革を迎えました。その結果が「HTML5」です。HTML5は、マルチメディア要素（動画や音声のネイティブサポート）や新しいフォームコントロール、グラフィックスを描画するための`<canvas>`要素など、多くの新機能を導入しました。これにより、ウェブ開発者はよりリッチでインタラクティブなウェブアプリケーションを構築できるようになりました。

タグの意味と種類

HTMLの基本は「タグ」によって構成されます。タグは情報の種類や役割を示すためのもので、`<>`で囲まれた構文を持ちます。例えば、`<h1>`タグは見出し1を示し、`<p>`タグは段落を示します。現在、HTMLには約140のタグが存在します。

タグの書き方とその理由

HTMLタグは必ず`<>`で囲まれます。この括弧はブラウザに対して「ここからタグが始まる」と明示するためのものです。これにより、ブラウザはタグの中の情報を適切に解析し、表示することができます。例えば、`<h1>こんにちは、世界！</h1>`と書けば、ブラウザは「こんにちは、世界！」を大きな見出しとして表示します。

主なHTMLタグの種類と意味

  • `<h1>`から`<h6>`（1991年）：見出しタグ。`<h1>`が最も重要な見出しで、`<h6>`が最も低い重要度の見出しを示します。`h`は「heading（見出し）」の略です。

  • `<p>`（1991年）：段落タグ。テキストを段落として表示します。`p`は「paragraph（段落）」の略です。

  • `<a>`（1991年）：アンカータグ。リンクを作成します。`a`は「anchor（アンカー）」の略です。`<a href="https://example.com">リンク</a>`と書けば、そのテキストがクリック可能なリンクになります。

  • `<img>`（1993年）：画像タグ。画像を表示します。`img`は「image（画像）」の略です。`<img src="image.jpg" alt="説明文">`と書けば、指定した画像が表示されます。

  • `<div>`（1995年）：コンテナタグ。特定のスタイルやスクリプトを適用するために使用します。`div`は「division（区分）」の略です。

  • `<span>`（1997年）：インラインコンテナタグ。テキストの一部を特定のスタイルで装飾する際に使用します。`span`は「span（スパン、範囲）」の略です。

  • `<ul>`、`<ol>`、`<li>`（1991年）：リストタグ。`<ul>`は順序なしリスト、`<ol>`は順序ありリスト、`<li>`はリストの項目を示します。`ul`は「unordered list（順序なしリスト）」、`ol`は「ordered list（順序ありリスト）」、`li`は「list item（リスト項目）」の略です。

  • `<table>`、`<tr>`、`<td>`**（1995年）：表タグ。`<table>`は表全体、`<tr>`は行、`<td>`はセルを示します。`table`は「table（表）」、`tr`は「table row（表の行）」、`td`は「table data（表のデータ）」の略です。

HTMLの仕組みとメカニズム

HTMLの基本構造

HTML（HyperText Markup Language）は、ウェブページの構造とコンテンツを定義するためのマークアップ言語です。HTML文書は、要素と属性を使用して文書の意味論的および構造的な情報を記述します。基本的なHTML文書は以下の構造を持ちます：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページのタイトル</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>見出し1</h1>
    </header>
    <main>
        <p>これは段落です。</p>
        <a href="https://example.com">リンク</a>
    </main>
    <footer>
        <p>&copy; 2024</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

DOCTYPE宣言

HTML文書の冒頭には`<!DOCTYPE html>`宣言が含まれています。これは文書がHTML5で書かれていることをブラウザに示すものであり、適切なレンダリングモードをトリガーします。この宣言により、ブラウザは「標準モード」でHTML文書を解析し、古いバージョンのHTMLの「クイークモード」との互換性を維持します。

HTML要素とタグ

HTML要素は開始タグと終了タグで構成され、その間にコンテンツが挿入されます。開始タグは`<element>`の形式で、終了タグは`</element>`の形式です。例えば、段落を定義する`<p>`要素は以下のように書かれます：

<p>これは段落です。</p>

タグは、ブラウザに対してその内部のコンテンツがどのように表示されるべきかを示します。タグは常に`<>`で囲まれ、終了タグではスラッシュ（`/`）が追加されます。

HTML要素のネスト

HTML要素は他の要素の内部にネストすることができます。ネストされた構造により、文書の階層的な構造を表現することができます。例えば、以下のように見出し要素`<h1>`が段落要素`<p>`と同じ`<div>`要素内にネストされています：

<div>
    <h1>見出し1</h1>
    <p>これは段落です。</p>
</div>

属性とその役割

HTML要素には属性を指定することができ、属性は要素の追加情報を提供します。属性は開始タグ内に含まれ、名前と値のペアで構成されます。例えば、リンク要素`<a>`の`href`属性はリンク先のURLを指定します：

<a href="https://example.com">リンク</a>

属性はスペースで区切られ、開始タグ内に記述されます。多くの属性はグローバル属性であり、ほとんどのHTML要素に適用できます。例えば、`id`、`class`、`style`などがあります。

HTMLの解析とレンダリングプロセス

ブラウザはHTML文書を読み込み、DOM（Document Object Model）ツリーを構築します。DOMツリーはHTML文書の論理構造を表すツリー構造であり、各ノードはHTML要素や属性を表します。以下は、ブラウザがHTMLを解析し、レンダリングする際の主要なステップです：

  1. HTMLパース：ブラウザはHTMLを逐次的にパースし、DOMツリーを構築します。HTMLの各タグは対応するDOMノードに変換されます。

  2. CSSパース：CSSはスタイルルールとしてパースされ、CSSOM（CSS Object Model）ツリーが構築されます。CSSOMはDOMと統合され、スタイルが適用されます。

  3. レイアウト：ブラウザはDOMとCSSOMを統合し、各要素の寸法や位置を計算します。このプロセスは「レイアウト」と呼ばれます。

  4. レンダリング：計算されたレイアウトに基づいて、ブラウザは各要素を描画し、最終的なビジュアル表現を生成します。この段階では、テキストのレンダリング、画像の描画、カンバス要素の描画などが行われます。

スクリプトとイベントハンドリング

JavaScriptなどのスクリプトはHTML文書に埋め込むことができ、動的なコンテンツの生成やユーザーインタラクションの処理を行います。スクリプトは通常、`<script>`タグを使用して文書の`<head>`または`<body>`セクションに挿入されます。イベントハンドラーを使用して、ユーザーの操作（クリック、キーボード入力など）に応じて動作を定義できます。

<button onclick="alert('ボタンがクリックされました')">クリック</button>

セマンティックHTMLとアクセシビリティ

HTML5以降、特にセマンティックなマークアップが重視されています。セマンティック要素は、文書の構造と意味をより明確にするためのもので、SEO（検索エンジン最適化）やアクセシビリティの向上に寄与します。例えば、`<header>`、`<nav>`、`<main>`、`<article>`、`<footer>`などの要素が含まれます。

HTMLは、ウェブページの構造とコンテンツを定義するための強力な言語です。ブラウザはHTMLを解析し、DOMツリーを構築し、スタイルを適用し、最終的なビジュアル表現を生成します。セマンティックなマークアップやアクセシビリティの考慮により、HTMLはより効果的でユーザーフレンドリーなウェブコンテンツを提供するための重要なツールとなっています。

最新のHTMLの状況

2024年現在、HTMLは依然としてウェブ開発の中心的な技術です。HTML5の仕様は継続的に更新され、新しいタグや機能が追加されています。例えば、`<dialog>`タグや`<template>`タグなど、より高度なユーザーインターフェースを実現するための要素が増えています。また、ウェブコンポーネントやカスタムエレメントといった新しい技術も登場し、HTMLの可能性はますます広がっています。

実生活で使用されているシーン

HTMLは私たちの日常生活のあらゆるところで使われています。例えば、スマートフォンでニュースを読むとき、ネットショッピングをするとき、SNSで友達と交流するとき、ほとんどすべてのウェブサイトがHTMLを基盤としています。さらに、企業の内部システムや教育機関のオンライン学習プラットフォーム、政府の情報提供サイトなど、あらゆる分野でHTMLは不可欠な役割を果たしています。


この記事が気に入ったらサポートをしてみませんか？