HTMLの超入門編です。初心者にも分かりやすく、専門用語を使わずに解説します。
HTMLは、CSS, JavaScriptと並んで、Webサイト作成にはなくてはならない技術です。
これを読めば、HTMLの役割、HTML5の『5』の意味も分かります。
『いまさら見直すのは恥ずかしい』という人にもオススメです
今回は、HTMLの書き方とか具体的な手法は一切ありません。ただただ『HTMLってなにもの？』だけの話です。
役に立つというより雑学です。でも、ウェブサイトの技術の中でのHTMLの役割がはっきりと分かりますので、最後までお付き合いください。
HTMLとは？
HTMLは『Hyper Text Markup Language』でマークアップ言語です。
マークアップ言語はデータを構造化したもので、データの保存・抽出を得意としています。
HTMLは研究機関から生まれたものです。研究データを整理・保存して、それを簡単に見れることを目的に使われました。
『ハイパーテキスト』はその名残です。『テキストリンク』といったほうが分かりやすいでしょう。単語を選んだらその単語の内容が出てくるので便利な辞書みたいで、出てきた当初は大発明でした。
『ボタンとか画像とか動画とか音声とかいろいろあるのになんでテキストなんだ？』と思うかもしれませんが、最初は『研究データ（テキスト）を保存・閲覧』するものだったからです。
HTML, CSS, JavaScriptの立ち位置
HTMLの誕生の話をしましたが、さらに『HTMLとは？』を続けると、一部分の話になるのでよくありません。ここはあえてWebの全体像を話します。
HTML, CSS, JavaScriptは、Webサイト作成では
フロントサイド
フロントエンド
と言われます。
Webサイトは、見る側（ブラウザ）と見せる側（Webサーバー）が情報をやり取りすることでページが表示されます。
フロントエンドは見る側、ブラウザの技術です。
ボタンやチェックボックスを表示（HTML）
文字を大きくしたり色を変える（CSS）
コンテンツをマウスで動かす（JavaScript）
などできますよね？
これらは全部、ブラウザが処理をしてユーザーに見せています。
（カッコ内は何が仕事をしているか）
ブラウザは優秀です。HTML, CSS, JavaScriptの3つの仕事をこなしているんだから。
HTMLの機能、CSS, JavaScriptとの関係
ブラウザからリクエストを受けて、Webサーバーから送られるデータはすべて文書（文字列）で、それがHTMLです。
（画像や動画などは、文書内のurlから別リクエストで取得。）
HTMLはブラウザとWebサーバーの間でやりとりするファイルのフォーマットです。
HTMLをそのまま表示すると、分からない人には意味不明なものが表示されるだけです。
HTMLの内容は、ブラウザを右クリックして、『ソースコードを表示』で見ることができます。
HTMLは『家の土台と骨組み』です。キッチン、収納、トイレなど決められたところに配置しますがそれだけです。
HTMLはコンポーネントの種類と配置を決める。
文字、ボタン、テキストボックスなどHTMLに配置するものを『コンポーネント』という。
HTMLが発展するにしたがって、文書だけではなくいろいろな表現ができるようになった。
一方、家の見た目を良くするのがCSSです。
CSS（Cascading Style Sheets）は、コンポーネントのサイズ・色・形などの装飾を担当。
たとえば、ブラウザに次のように表示されているとします。
タイトルサンプル
本文サンプル
本文サンプル
本文サンプル
CSSを外してHTMLだけだとこんな感じになります。
タイトルサンプル
本文サンプル
本文サンプル
本文サンプル
味気ない文書になりました。HTMLが昔は『構造化された文書』だったことが分かります。
JavaScriptはプログラミング言語
家だけ立派にしても豊かな生活はできません。家具・家電など生活の『動き』を用意する必要があります。それがJavaScriptです。
JavaScriptはコンポーネントに動きをつけて、リッチなWebサイトに仕上げます。
- クリックしたら色を変える
- ドラッグ&ドロップでコンポーネントを動かす
など多彩です。最近はWebアプリと言って、Webサイトをアプリケーションとして使うことができます。Webアプリのタッチ（マウス）操作の中核がJavaScriptです。
HTML, CSS, JavaScriptのなかで、JavaScriptだけはプログラミング言語です。
JavaScriptを書くのはプログラミングですが、HTML, CSSは文書を書くだけなのでプログラミングではありません。
（HTML, CSSの作成はWordで文書を書くのと同じ。）
HTML5ってなに？
HTMLは、バージョンで管理されています。現在はバージョン5.2で、一般的には『HTML5』と呼ばれています。
HTML5
| HTML5 | 2014年10月28日勧告 |
| HTML5.1 | 2016年11月1日勧告 |
| HTML 5.2 | 2017年12月14日勧告 |
HTML5は、WHATWG (Web Hypertext Application Technology Working Group, ワットダブルジー)が仕様を策定して、その結果に基づいてW3C が勧告を行なっています。
W3C（ダブリュー・サン・シー）
HTML, CSSの標準化団体。仕様の策定から勧告まで行う。HTML5からは策定は行わず勧告だけを行うようになった。
| 策定 | どのような機能を追加・変更・削除するのか決めること。 |
| 勧告 | 決まった仕様の対応を開発元に促すこと。 |
2019年にHTMLの仕様策定から撤退し、長年対立してきたWHATWGへ移管。
じつはHTML5の仕様策定はWHATWGが行っており、それをW3Cが追認して勧告した。
この時点でHTML5は終わっている。
後継のHTML標準仕様のことを HTML Living Standard という。
HTML5から仕様の策定・勧告の方法が変わる
HTML5より前まで、W3Cが仕様の策定から勧告まで行なっていました。
しかしW3Cは突然、HTMLの仕様をこれ以上変更しないと、バージョンアップの中止を宣言します。
それに反発したのは開発者たちでした。このときすでに、動画や音声をHTMLで実装するように要望が高まっていたからです。
そこで2004年、Apple, Mozilla, Operaの開発者たちが独自で開発を続けるためにWHATWGを設立します。
結局、世の中のニーズをくみ取ったWHATWGが支持され、あとになってW3Cが合流して、
| 仕様策定 | WHATWG |
| 勧告 | W3C |
という形に収まりました。
HTML5の特長
HTML5の1番の特長は、動画と音声の埋め込みが簡単にできるようになったことです。
それまでは、flashという専用プログラムをパソコンにインストールしなければなりませんでした。覚えている人もたくさんいると思います。
その他にもレスポンシブデザイン対応など、いろいろな機能が追加されています。
まとめ
HTMLは、Webサイトの中核の技術です。Webサイト作成と言えば最初に学ぶプログラミング言語だと言う人もいます。
正確にはまちがい。HTMLはプログラム言語ではなくマークアップ言語。
HTMLはプログラミングではなく、特殊なルールの文書作成。
Webデザインに関わる人、Webデザイナーを目指す人は必ず習得しなければなりません。
あと、セットでCSSも覚えたほうが良いです。JavaScriptもあるのですが、これは、がっつりプログラミングになるので、余裕があればチャレンジしてもいいでしょう。
『コーダーがいるからデザイナーは書けなくてもいい』という声を聞きます。これは間違いです。
どの世界に自分の表現を形にする方法を一度も習得せずに、他人に丸投げして正当化する人がいるのでしょうか？
- 料理長は作れないではなく『作らない』
- 漫画家は書けないではなく『書かない』
三ツ星シェフや大先生クラスでもない人が、誰かに仕事を丸投げするほど『何様ですか？』という話です。
というか、HTML, CSSは文書作成なので、パソコンが使えなくて女性社員に丸投げしていたかつてのオッサンと同じです。
