＃

そもそもHTMLとは？

HTMLとは“Hyper-Text Markup Language”の略でウェブ上の文書を記述するためのマークアップ言語のことです。それぞれの語句を分解すると以下のような意味になります。

“Hyper-Text”（ハイパーテキスト）
複数の文書を相互に関連付けて結び付ける仕組みのこと。テキスト間を結びつける参照のことはハイパーリンクと呼ばれ、“Hyper-Text”、テキストを超えたテキストとなる所以はこのハイパーリンクです。: “Markup”（マークアップ）
テキストに目印を付けることで見出しなどの文章の構造や、文字の大きさや色などの修飾情報、ハイパーリンクなどの機能を文章中に記述していくこと。: “Language”（ランゲージ）
マークアップするためのルールや文法のこと。

ハイパーリンクによって文書間を結びつけたり、画像、動画、音声などの関連するデータを埋め込むことができるのがHTMLの最大の特徴です。“Markup”によって文書を人間だけでなく機械、コンピュータにも理解できるように目印をつけることでこれらを機能させることができるほか、見出しや段落などの文書の構造を明確化することができます。

＃

HTMLでマークアップすると？

以下は適切に“Markup”されていない文書の例です。



バナナの果実<br>

バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。<br>

<br>

バナナの保存方法<br>

果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。<br>

<br>

バナナの栄養素<br>

ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。<br>

バナナの果実
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。

バナナの保存方法
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。

バナナの栄養素
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

改行によって閲覧している人間は見出し、段落をなんとなく知ることができます。しかし、コンピューターには見出しがどこなのか、段落がどこなのか、を読み取ることができません。

こちらはきちんと“Markup”された例です。



<h1>バナナの果実</h1>

<p>バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。</p>

<h1>バナナの保存方法</h1>

<p>果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。</p>

<h1>バナナの栄養素</h1>

<p>ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。</p>

バナナの果実

バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。

バナナの保存方法

果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。

バナナの栄養素

ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。

HTMLタグによってどの部分が見出し、どの部分が段落、と明確に文書の構造が示されているため、コンピューターにも見出しや段落を読み取ることができます。

また、コンピューターがタグによって文書の構造を読み取ることによってブラウザによってUAスタイルシートが適用され、見出しが太字になったり、文字の大きさが変わったりと閲覧している人間にも読みやすいものになります。

HTMLは文書の意味的な構造を表すための言語なので、実際にどのようにHTML文書がブラウザによって表示されるかはCSSによって記述されたスタイルシートによって指定されます。

＃

HTML5とは？

“HTML5”はウェブページやウェブアプリケーションを構築する際に使用されるHTMLだけでなくHTMLに関連する現代のウェブ技術を表す言葉として用いられますが、一般的にはHTMLのことを指して用いられます。

もとは2014年に勧告されたHTML4.01に続くHTMLの技術仕様の改訂版のことを“HTML5”と言っていました。現行の技術仕様は“HTML Living standard”ですが、広い意味で“HTML5”はこの“HTML Living standard”を指す言葉として用いられています。

＃

HTML5のこれまで

1999年にHTML 4.01の仕様を勧告したW3Cは、これに続く次世代のマークアップ言語としてXHTMLを策定してXHTML1.0の仕様を勧告しました。

しかし、HTMLではコードの記法に多少誤りがあったとしてもブラウザーが補完してウェブページを表示できたのに対してXHTMLはかなり厳密に定義されていて多少の曖昧さも許容しなかったこともあり、XHTMLはあまり普及せず、多くのウェブデザイナーはHTML4.01を使用し続けました。

このような状況にもかかわらず、XHTMLの開発を進めるW3Cに対して不満を持ったApple、Mozilla、OperaはWHATWGを立ち上げて次世代のHTMLの在り方を検討するようになります。

主要なブラウザのデベロッパーからなるWHATWGは徐々に影響力を強め、2007年にW3CはHTMLの改訂を目的としたワーキンググループを立ち上げて、そこでWHATWGが策定していた技術仕様をHTMLの改訂版のベースとして採用しました。W3CとWHATWGは協力してHTML5の技術仕様を策定して2014年10月28日に15年ぶりの大幅な改定版であるHTML5が勧告されました。

HTML5はその後少しずつアップデートが続けられており、HTML5.1が2016年11月1日に、HTML5.2が2017年12月14日に勧告されました。

W3CとWHATWGの共同作業によって策定されたHTML5ですが、WHATWGはW3Cとの方針の相違から“HTML Living Standard”として独自にHTMLの標準化を進めていくようになります。

長らく2つの“標準”が併存する状態が続いていましたが、2019年5月になりようやくW3CとWHATWGは“HTML Living standard”をHTML技術仕様の唯一の標準規格とし、WHATWGが主体となってW3Cが協力して技術仕様を策定・更新していくことに合意しました。

なお、WHATWGの仕様書の冒頭にもあるように、“HTML5”はHTMLの標準化がWHATWGへ移った後も“HTML Living standard”を含めたウェブ技術を表す言葉として使用されています。

＃

いままでのHTMLとの違い

今までのHTMLからHTML5になって変わった点をいくつか取り上げます。

スタイリング要素の廃止

HTML5では文書構造をHTMLで、装飾やスタイリングはCSSでと明確に役割が分担されるようになりました。

これまでのHTMLには書体や文字の色を変える“font”要素や太字にする“b”要素、イタリック体にする“i”要素などスタイリング目的の要素がありましたが、そのほとんどが廃止かもしくは意味が変更になっています。

シンプルな動画や音声データ、グラフィックの埋め込み

これまでのHTMLではFlashなどのブラグインを使用しなければならなかった、動画や音声データ、グラフィックなどの埋め込みを、新たに追加された“video”要素や“audio”要素、“canvas”要素によってプラグインを使用せずにHTMLで直接を埋め込むことができるようになりました。

セクショニング要素の追加

これまでのHTMLでも見出し要素によって文章のアウトラインを生成することはできましたが、新しく追加されたセクショニング要素(“article”要素、“nav”要素、“section”要素、“aside”要素)によってより明確にアウトラインを生成することができるようになりました。

簡潔になったコード

HTML5ではDOCTYPE宣言や“meta”要素などの記述が簡素化され、より簡潔にコードを書くことができるようになりました。

以下はDOCTYPE宣言の例です。



HTML5

<!DOCTYPE html>

HTML4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

以下は“meta”要素で文字エンコーディングを指定した例です。



HTML5

<meta charset="UTF-8">

HTML4

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

さまざまなAPIの追加

HTML5ではアプリケーションをプログラミングする際に使用する命令や関数の記述ルールである“API(Application Programming Interface)”が新たに追加されています。それぞれの“API”で定められた命令や関数を指定することで、ドラッグ・ドロップ機能や位置情報の取得などの機能をHTMLで実現することができます。これによってより高度な機能を持った“ウェブアプリケーション”を構築することが可能となります。