JavaScriptやReact・Vueより前に、もっと基礎にある言葉があります。HTMLです。名前だけは聞いたことがある人も多いはずなので、そこから始めます。
プログラミング言語ではない
最初に押さえておきたいのが、HTMLはプログラミング言語ではないということです。JavaScriptのように「条件によって処理を分ける」「同じ処理を繰り返す」といった計算のロジックは、HTMLには書けません。
HTMLが担っているのは、もっと手前の役割です。「これは見出しです」「これは段落です」「これは箇条書きのリストです」——文章のかたまりに、こういう意味を付けていく仕組みです。この種の仕組みは「マークアップ言語」と呼ばれ、プログラミング言語とは別の分類になります。HyperText Markup Languageの略で、考案したのはTim Berners-Lee氏。1991年、CERN（欧州原子核研究機構）で、研究者どうしが文書をやり取りするために作ったのが始まりです。Webという仕組みそのものの、最初の技術でした。
「伝えるための仕組み」としての価値
計算をしないぶん地味に見えますが、ここにHTMLの価値があります。意味だけを付けておけば、あとは見る側の機械が、それぞれに合ったやり方で表示してくれます。
- パソコンのブラウザなら、見出しは大きく太い文字で表示される
- スマートフォンなら、画面幅に合わせて折り返される
- 目の不自由な人が使う読み上げソフト（スクリーンリーダー）なら、「見出し」「リスト」という意味を音声で伝えてくれる
- 検索エンジンは、見出しの部分を「このページの主題」として重視して読み取る
もしHTMLが「見た目そのもの」を指定する仕組みだったら、こうした使い分けはできません。「何であるか」だけを伝え、「どう見せるか」は渡された側に任せる——この割り切りが、あらゆる機械・あらゆる環境で同じ文書を読めるようにしている理由です。
実際の姿
タグと呼ばれる印で、文章を囲んで意味を付けます。
<h1>今日の予定</h1>
<p>午後から買い物に行く。</p>
<ul>
<li>牛乳</li>
<li>卵</li>
</ul><h1>は見出し、<p>は段落、<ul>と<li>はリストという意味です。これをテキストファイルとして保存し、拡張子を.htmlにしてブラウザで開くと、見出しは大きく、リストは箇条書きの記号付きで表示されます。特別な準備をしなくても、メモ帳のようなアプリとブラウザさえあれば試せます。 自分で書いた数行が、ブラウザの中でそれらしい見た目になって現れる——一度くらい味わってみても面白いかもしれません。
見た目は、CSSの仕事
「じゃあ色や余白はどこで決めるのか」と思うかもしれません。それはCSSとは何かで扱う、別の仕組みの役割です。HTMLが「意味」を、CSSが「見た目」を、JavaScriptが「動き」を担当する、という役割分担がWebの基本構造になっています。
管理人がここから世界を広げた話
このサイトについてにも書いたとおり、管理人はフリースクールを運営していた20代後半に、必要に迫られてWebサイト作成を覚え始めました。最初はホームページビルダーのような、画面を見ながら組み立てるソフトを使っていましたが、そこから手書きのHTMLへと移っていきました。
タグを1つずつ手で書き、保存してブラウザで開き直すと、思ったとおりの見た目になっている——この確認作業自体が、いま思えば最初の「ものづくり」の実感でした。願いが先で、技術はあとから付いてきた、という順番だったのはこのサイトについてに書いたとおりです。HTMLは、その最初の一歩にあった言葉です。
まとめ
- HTMLはプログラミング言語ではなく、マークアップ言語。文章に「意味」を付ける仕組み
- 見た目ではなく意味だけを指定するからこそ、ブラウザ・スマートフォン・読み上げソフト・検索エンジンなど、あらゆる機械が同じ文書を読み取れる
- 見た目はCSS、動きはJavaScriptが担当する——HTMLはその土台
- テキストファイル1つとブラウザがあれば、いつでも自分の手で試せる