HTML（英：HyperText Markup Language、エイチティーエムエル）とは、Webページを作成するための最も基本的なマークアップ言語です。
普段私たちがブラウザで見ているWebサイトの文章や画像、リンクなどは、すべてこのHTMLによって記述されています。厳密には「プログラミング言語」ではなく、コンピュータ（ブラウザ）に対して「ここは見出し」「ここはリスト」「ここは画像」といった文書の構造と意味を伝えるための言語です。
Webフロントエンドの3大言語（役割の違い）
Webサイトの目に見える部分（フロントエンド）は、主にHTML、CSS、JavaScriptの3つの言語を組み合わせて作られます。これらを「家づくり」に例えると以下のようになります。
| 言語の種類 | Webサイトにおける役割 | 家づくりに例えると |
|---|---|---|
| HTML | 文字や画像など、ページの構造（骨組み）を作る。 | 家の基礎・柱・間取り （どこにどの部屋があるかを決める） |
| CSS | 文字の色や大きさ、レイアウトなどデザイン（装飾）を整える。 | 壁紙・塗装・インテリア （外観や内装を美しく仕上げる） |
| JavaScript | 画面にアニメーションなどの動きや機能を付ける。 | 電気・水道・自動ドア （スイッチを押すと動く仕組みを作る） |
タグと要素（Element）の基本
HTMLは、「タグ（Tag）」と呼ばれる < > で囲まれた記号を使ってテキストを挟み込むことで構造を定義します。例えば、見出しを作りたい時は <h1>これは見出しです</h1> のように、開始タグと終了タグでコンテンツを囲みます。
あわせて知っておきたい用語
- DOM（Document Object Model）
ブラウザがHTMLを読み込んだ際に構築する、ツリー状のデータ構造のことです。JavaScriptを使って「ボタンを押したらこの文字の色を変える」といった操作を行う際、プログラムはこのDOMを書き換えることで画面を変化させています。 - セマンティックHTML（Semantic HTML）
単に画面に文字を表示するだけでなく、検索エンジン（Googleのbotなど）や視覚障害者向けの音声読み上げソフトに対して、「ここはナビゲーション（nav）」「ここは独立した記事（article）」と、文書の正しい「意味」を伝えるための記述手法です。SEO対策の最も基礎となる部分です。 - SPA（Single Page Application）
現代のWebアプリ（GmailやTwitterなど）の主流な構造です。ページを移動するたびにサーバーから新しいHTMLをまるごとダウンロードするのではなく、最初に1枚の「空のHTML」だけを読み込み、あとはJavaScript（ReactやVue、FlutterのWeb版など）を使って中身のデータだけを動的に書き換えていく仕組みです。
コメント