HTML — 知星図

概要

HTML（HyperText Markup Language）は、Webページの「構造」を記述するマークアップ言語です。見出し・段落・リンク・画像・フォームといった文書の部品を <h1> や <p> のようなタグで囲んで意味づけし、それらを入れ子にして一つの文書を組み立てます。プログラミング言語のように処理の手順を書くのではなく、「この部分は見出しである」「ここはリンクである」と宣言していく点が特徴です。

ブラウザは受け取ったHTMLを解析して DOM（Document Object Model）というツリー構造をメモリ上に構築します。このDOMに CSS が見た目を与え、JavaScript が動きを与える——Webフロントエンドの三層構造の土台がHTMLです。どれだけフレームワークが進化しても、最終的にブラウザへ届き、画面に描かれるのはHTMLである、という事実は変わりません。

なぜ生まれたか

1989年、CERN のティム・バーナーズ＝リーは、研究所内に散らばる膨大な文書を相互に参照し合える仕組みを構想していました。当時も文書フォーマットは存在しましたが、「文書の中の一語から、別のコンピュータ上の別の文書へ直接跳べる」仕組み——ハイパーテキストを、ネットワーク越しに実現する共通言語がなかったのです。

そこで彼は、既存の文書記述言語 SGML を大幅に簡略化し、<a href="..."> というリンク（アンカー）を核に据えた HTML を設計しました。「誰でも書ける単純さ」と「URL で世界中の文書とつながるリンク」の組み合わせが決定的で、HTML は HTTP・URL とともに World Wide Web を成立させた三大要素になりました。

詳細

タグと属性、そして入れ子構造

HTMLの基本単位は要素です。<a href="/about">会社概要</a> のように、開始タグ・属性（href）・内容・終了タグで一つの要素をなし、要素の中に要素を入れ子にしてツリーを作ります。文書全体は <html> を根とし、メタ情報を持つ <head>（タイトル、文字コード、CSSや JavaScript の読み込み指定など）と、実際に表示される <body> に分かれます。この「ツリーである」という性質が重要で、ブラウザ内部の DOM も、CSSのセレクタも、JavaScriptによる操作も、すべてこのツリー構造を前提に動きます。

ブラウザがHTMLを画面にするまで

HTMLを受け取ってから画面に描画されるまで、ブラウザは決まったパイプラインを通ります。

HTML と CSS の2本の解析の流れがレンダーツリーで合流し、レイアウトを経て描画に至る

このように、HTMLからのDOMとCSSからのCSSOMという2本の流れが合流してレンダーツリーになる点がポイントです。

パース中に <script> に出会うとHTMLの解析が止まってJavaScriptが実行される（そのため defer 属性などで読み込みを制御する）、CSS が揃わないと描画が始まらない——といったパフォーマンス上の定石は、すべてこのパイプラインから導かれます。「HTMLは単なるテキストではなく、ブラウザにとってのレンダリングの設計図である」と捉えると、フロントエンドの最適化の話が理解しやすくなります。

セマンティックなマークアップ

HTMLのタグには意味があります。単に太字にしたいから <h1> を使うのではなく、「文書の最上位見出しだから」使う。ナビゲーションは <nav>、記事は <article>、ボタンは <div> にクリックイベントを付けるのではなく <button> を使う——これをセマンティック（意味論的）なマークアップと呼びます。見た目上は同じでも、スクリーンリーダーなどの支援技術は要素の意味を頼りにページを読み上げ、検索エンジンは構造から内容の重要度を推定します。アクセシビリティとSEOの土台は、正しい要素選びにあります。

フォーム——Webがアプリになった仕掛け

<form> と <input> は、閲覧するだけだったWebに「ユーザーからの入力」を持ち込んだ要素です。フォームを送信するとブラウザは入力値を HTTP リクエストとしてサーバへ送ります。ログイン、検索、購入——Webアプリケーションの原型はすべてフォームです。現在はJavaScriptで送信を制御することが多いものの、バリデーション属性（required や type="email"）など、HTML自体が持つフォーム機能を活かすとコードが簡潔になります。

「壊れても表示する」という設計思想

HTMLパーサは、タグの閉じ忘れや誤った入れ子があってもエラーで止まらず、できる限り解釈して表示します。この寛容さがWebの爆発的普及を支えた一方、「なんとなく動いてしまう」ため構造の乱れに気づきにくいという副作用もあります。また、ユーザー入力をエスケープせずにHTMLへ埋め込むと、それがタグとして解釈されて XSS（クロスサイトスクリプティング）の脆弱性になります。「HTMLは文字列であると同時に、ブラウザに解釈されるコードでもある」という二面性は、セキュリティを考える上で常に意識しておきたい点です。

フレームワーク時代のHTML

React や Vue などのフレームワークを使う開発では、HTMLを直接書く機会は減ったように見えます。しかし SPA はJavaScriptでDOM（＝HTMLのツリー）を組み立てており、SSR や SSG は「最初のHTMLをサーバ側で生成して速く届ける」技術です。つまりモダンフロントエンドの技術群は、いかに良いHTMLを・いつ・どこで生成するかという問いへの答え方の違いであり、HTMLの理解はその出発点になります。