私たちが日々利用しているWebサイトの土台となっているのがHTML（HyperText Markup Language）です。HTMLは、テキストや画像、リンクなどの要素を適切に配置し、Webブラウザが正しく表示できるように指示を出すためのマークアップ言語です。単なる文書作成ツールではなく、現代のインターネットにおける共通言語として機能しています。
Webの父として知られるティム・バーナーズ＝リーによって考案されたこの技術は、時代に合わせて劇的に進化してきました。
Key Facts
- 役割： Webページの構造を定義するドキュメントファイル形式。
- 標準化団体： 現在はWHATWGが「Living Standard」として管理。
- 拡張子： 一般的に
.htmlまたは.htmが使用される。 - 動作環境： Google ChromeやSafariなどのWebブラウザによってレンダリングされる。
- 関連技術： デザインを制御するCSSや、動的な処理を行うJavaScriptと組み合わせて利用される。
HTMLの構造とマークアップの仕組み
HTMLは「要素」と呼ばれる単位で構成されています。要素は通常、開始タグと終了タグでコンテンツを囲む形式で記述されます。これにより、ブラウザはどこが「見出し」で、どこが「段落」であるかを判別します。
マークアップの3つの主要目的
- 構造的マークアップ： テキストの役割（見出し、リスト、引用など）を明確にします。
- 表現的マークアップ： 見た目の装飾を指定します（ただし、現在はCSSへの移行が推奨されています）。
- ハイパーテキストマークアップ： 他の文書へ移動するためのリンクを作成します。
また、要素には「属性」を付与することで、より詳細な設定が可能です。例えば、リンク先を指定する href 属性や、画像の説明を加える alt 属性などが代表的です。
特殊文字の扱い（文字参照）
HTMLでは、タグとして機能する記号（< や > など）をそのまま表示させたい場合や、著作権記号（©）などを表示させるために「文字参照」という特殊な記述法を用います。
| 表示結果 | 名前付き参照 | 数値参照（10進数） | 説明 |
|---|---|---|---|
| & | & |
& |
アンパサンド |
| < | < |
< |
不等号（左） |
| > | > |
> |
不等号（右） |
| " | " |
" |
二重引用符 |
| © | © |
© |
コピーライト |
HTMLの進化とバージョン履歴
HTMLは1993年の初版リリース以来、Webの多様化に合わせてアップデートを繰り返してきました。初期はSGML（標準汎用マークアップ言語）をベースにしていましたが、次第に独自の進化を遂げています。
主要バージョンの変遷
- HTML 2.0 (1995年)： RFC 1866として公開。フォームによるファイルアップロードやテーブル機能が追加されました。
- HTML 4.0 (1997年)： W3Cによる勧告。厳格な「Strict」と、古い要素を許容する「Transitional」のバリエーションが設けられました。
- XHTML： XMLの厳格な構文ルールをHTMLに適用させた派生規格です。
- HTML5 (2014年)： Webアプリケーションとしての機能を大幅に強化。ビデオやオーディオの直接埋め込み、Canvasによる描画などが可能になりました。
現在は、特定のバージョン番号を付けず、継続的に更新し続けるLiving Standardという形式が採用されており、WHATWGがその策定を主導しています。
現代のWeb開発におけるHTMLの役割
現在のWeb開発では、単に表示させるだけでなく、検索エンジンや支援技術（スクリーンリーダーなど）が内容を正しく理解できるセマンティックHTML（意味論的なHTML）の重要性が高まっています。例えば、単なる div タグではなく article や nav といった意味を持つタグを使うことで、文書構造を明確にします。
また、HTMLは単体で動作するのではなく、以下の技術スタックと密接に連携しています。
- CSS： レイアウト、配色、フォントなどの視覚的デザインを制御。
- JavaScript： ユーザー操作への反応やデータの動的更新を実現。
- DOM (Document Object Model)： ブラウザがHTMLを解析して作成するツリー構造で、プログラムからページ内容を操作することを可能にします。
Frequently Asked Questions
HTMLとXHTMLの違いは何ですか？
HTMLは比較的記述の柔軟性が高い言語ですが、XHTMLはXMLベースであり、タグの閉じ忘れを許さないなど、非常に厳格な構文ルールを持つことが特徴です。
HTML5で最も大きく変わった点はどこですか？
マルチメディア対応の強化が最大の変化です。以前は外部プラグインが必要だった動画（video）や音声（audio）の再生が、HTML標準のタグだけで実現できるようになりました。
「Living Standard」とはどういう意味ですか？
固定されたバージョン（例：HTML 6など）をリリースするのではなく、Webの進化に合わせて仕様を常に更新し続けるという運用方式のことです。
セマンティックHTMLを使うメリットは何ですか？
検索エンジン（SEO）がページの内容を正確に把握しやすくなるほか、視覚障害者が利用するスクリーンリーダーなどの支援技術において、ページの構造が正しく伝わりアクセシビリティが向上します。
HTMLの編集には専用のソフトが必要ですか？
いいえ。HTMLはプレーンテキスト形式であるため、メモ帳などのシンプルなテキストエディタで作成可能です。ただし、効率的に開発するために、コード補完機能を持つ専用のHTMLエディタが広く利用されています。
References
- Even though HTML code can be executed in a browser, it is not viewed as a programming language in programming language discourse.
📸 フォトギャラリー