HTMLとは、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略称で、ウェブページを作成するためのマークアップ言語の1つです。
参考 マークアップ言語とは？
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>これは段落です。</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</body>
</html>
上記のHTMLファイルをブラウザで表示した結果がこちら。
このページでは、今更聞けない「HTMLって何？」という素朴な疑問をお持ちの方に１からわかりやすく解説します。
Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。
HTMLとは？簡単に
HTMLとは、Webページを作成するためのマークアップ言語の1つです。HTMLを使用することで、テキストや画像、音声、動画などのコンテンツをWebページ上に表示することができます。
今見ているこのページもHTMLによってマークアップされた文章で表示されています。
HTMLは、文字にマークをつける（タグをつける）ことで文字に意味を持たせるためのマークアップ言語に分類されるので、プログラミング言語とは異なります。
マークアップ言語とは、文章やデータの構造や意味を表現するために使われるコンピュータ言語の一種です。
マークアップ言語では文章の中に特殊な記号やタグを挿入することで、その部分の意味や機能を明示します。これにより、コンピュータが文書の構造を理解し、適切に表示や処理を行うことができます。
参考 マークアップ言語とは？
HTMLがブラウザで表示される仕組み
HTMLの実体は「.html」「.htm」といった拡張子のファイルです。ブラウザはこのHTMLファイルを読み取り解析することで、画面表示を行っています。
したがって、例えば自分でHTMLファイルを作成してデスクトップに保存してクリックすれば、それだけでブラウザ上で自分の作ったHTMLファイルを表示させることもできます。
試しに、以下をコピペしてテキストエディタで保存（拡張子は「html」）してブラウザで表示してみてください。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>これは段落です。</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</body>
</html>
以下のような画面が開かれるはずです。
ブラウザがHTMLファイルを解析し、例えば見出しであれば太字で大きく、リストであれば箇条書きの形で表示するという流れです。
実際には普段我々はインターネットを通してこのHTMLファイルを取得することで、ブラウザ上にWebページを表示させていますが、ファイルをインターネット経由でやり取りするという点を除いては原理は同じ。
以下にちょっと詳しく補足します。
HTML：タグと要素
HTMLを理解するために必須となる知識がタグと要素です。
要するに、HTMLでは文章をマークアップするにあたり、タグを利用する（そのタグで囲まれた部分を要素と呼ぶよ）という点が特徴だと押さえておけばOKです。
HTMLを記述する際の基本ルールは以下の記事をご覧ください。
参考 HTMLの構文ルール
HTMLの歴史とバージョン
HTMLの誕生は、1989年に遡ります。
その当時、イギリスの物理学者ティム・バーナーズリー（Tim Berners-Lee）は、スイスのCERN（欧州原子核研究機構）で働いていました。彼は、世界中の研究者が情報を簡単に共有できるようなシステムの構築を目指し、HTMLを含むWeb技術の原型を開発しました。
バーナーズリーは、テキスト中にリンクを埋め込むことで、異なる文書やリソースを相互に参照できる「ハイパーテキスト」という概念をHTMLに導入しました。また、既存のマークアップ言語であるSGML（Standard Generalized Markup Language）をベースに、ウェブページの構造を定義するための独自のタグセットを開発。
以上のような流れの中で、HTMLはウェブ上の文書を表現するためのマークアップ言語として誕生しました。
要するに、世界中で様々な情報を簡単に共有できるようにするために生まれたWebの中で、共通のマークアップ言語して誕生したのがHTMLということです。
| 年 | HTMLのバージョン | 追加された主な要素と機能 |
|---|---|---|
| 1989 | - | ハイパーテキストとマークアップ言語を組み合わせた原型を開発 |
| 1991 | HTML 1.0 | 最初のウェブサーバーとウェブブラウザを立ち上げ、最初のHTML仕様を公開 |
| 1995 | HTML 2.0 | フォームやインライン画像などの要素が追加され、ウェブページのインタラクティビティが向上 |
| 1997 | HTML 3.2 | テーブルやスタイルシートのサポートが追加され、レイアウトやデザインの制御が向上 |
| 1999 | HTML 4.01 | セマンティックなマークアップをサポートする要素が追加され、アクセシビリティや国際化が向上 |
| 2000年代初頭 | XHTML | XMLとHTMLを組み合わせた仕様で、より厳密な文法が求められるものの、広く普及せず |
| 2008 | HTML5 | 新しいマルチメディア要素やセマンティック要素、JavaScript APIが追加され、ウェブアプリケーションの開発が容易に |
| 2014 | HTML5 | 正式な規格として承認され、以降現在まで広く利用されるHTMLのバージョンとなる |
HTML5とは
最後に現代の主流HTML5について解説しておきます。
現代の我々が主に扱うのはこのHTML5です。従来のバージョンと比較してどのような特徴を持っているのか？を何となくで良いので頭に入れておきましょう。
HTML5の特徴
従来のHTML4.01やXHTML1.0といったバージョンから大幅な機能追加や改善が行われ、Webアプリケーションの開発が容易になるよう設計されています。以下に、HTML5の主な特徴や機能を解説します。
以上のように、HTML5は従来のHTMLに比べて多くの新機能や改善点があり、ウェブページやウェブアプリケーションの開発がより効率的かつ効果的に行えるようになりました。このため、現代のウェブ開発においては、HTML5が広く使われています。
Webエンジニア向け→完全無料のHTML/CSS/JS ロードマップ
Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の１つがHTML/CSS/JavaScriptです。
以下のページでは、そもそもHTMLって何？何のために学習するの？という疑問に回答しつつ、HTML/CSS/JavaScriptを学習するためのロードマップ（全５０記事）を整理しています。
以下のページの内容をマスターすればHTMLとCSSの基本はOK。Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。
