HTML イントロダクション

1. HTMLとは何か？

HTMLの正式名称は HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）です。
この概念を完全に理解するために、名前を3つのパーツに分解して詳しく見ていきましょう。

1.1 ハイパーテキスト (HyperText)

HTMLにおける「ハイパーテキスト」とは、リンクを含んだテキストのことを指します。

• 従来のテキスト： 最初から最後まで順番に読むことしかできません（線形な読解）。
• ハイパーテキスト： リンクをクリックすることで、いつでも他の情報へジャンプできます（非線形な読解）。この「ジャンプ」する能力こそが、ワールド・ワイド・ウェブ（World Wide Web）を一つに繋ぎ合わせている核心です。

       日常生活の例1：Wikipedia Wikipediaを見ているとき、多くの青い文字（リンク）に気づくはずです。それらをクリックすると、別の関連記事に飛びます。これがハイパーテキストであり、固定された読み方ではなく、自由な探索を可能にします。

       日常生活の例2：オンラインの銀行明細 ネット上で取引履歴を確認している際、特定の取引をクリックすると詳細ページへ移動します。この「リスト」から「詳細」への遷移も、ハイパーテキストの機能によるものです。

1.2 マークアップ (Markup)

「マークアップ」とは、コンテンツに注釈を付けたり、構造を定義したりすることを指します。
HTMLでは、要素（Elements）や属性（Attributes）と呼ばれる特殊なコードを使用して、ブラウザに「このコンテンツが何であるか」を伝えます。

注意点： あなたがブラウザに伝えているのは「これは何か」（例：これは見出しである）ということであり、「これがどのように見えるべきか」ではありません。見た目の制御は CSS の役割です。

       日常生活の例：編集者の校正 コンピュータが普及する前、作家が原稿を編集者に渡すと、編集者は紙の上に赤ペンで「ここはタイトル」「ここは太字」「ここは新しい段落」と「マークアップ（指示）」を書き込みました。これらのマークは物語の一部ではなく、印刷担当者に物語をどう配置するかを伝えるためのものです。HTMLがブラウザに対して果たす役割もこれと同じです。

       日常生活の例：買い物リスト 「野菜類」「乳製品」「穀物」といった分類ラベルが付いたリストを想像してください。これらの分類ラベルが「マークアップ」であり、リストに構造と意味を与えています。

1.3 言語 (Language)

HTMLが「言語」と呼ばれるのは、特定のルール、構文（Syntax）、そしてキーワードのセットを持っているからです。

これは、Chrome、Edge、Safariといったすべてのウェブブラウザに共通する「母国語」です。人間が共通の言語を使って意思疎通を図るように、開発者とブラウザはHTMLを使ってコミュニケーションをとります。

2. HTMLはどのように動作するのか？

HTMLはウェブページを作成するための基盤です。ブラウザにURLを入力してエンターキーを押したとき、舞台裏では一連のプロセスが動いています。

2.1 シンプルな「リクエスト・レスポンス」プロセス

1. あなた（クライアント）がリクエストを送信： ブラウザがインターネットの向こう側にあるサーバーにリクエストを送ります。「このURLのページを見せてください」。
2. サーバーのレスポンス： サーバーは対応するHTMLファイル（および関連する画像やスタイルシートなど）を見つけ出し、ブラウザに送り返します。
3. ブラウザが翻訳とレンダリングを実行： ブラウザはファイルを受け取ると、まずHTMLを読み取ります。「マークアップ」を解釈して、ページの構造（どこが見出しで、どこが段落か）を理解します。その後、CSS（ビジュアル担当）と JavaScript（インタラクション担当）を組み合わせ、完成したウェブページを画面に表示（レンダリング）します。

2.2 重要な役割分担：HTMLは「構造」のみを担当

• HTML (原材料)： 構造とコンテンツを定義（これは見出し、あれは画像）。
• CSS (盛り付けと装飾)： 表現を担当（見出しは赤色、画像は右側に配置）。
• JavaScript (振る舞いの指示)： インタラクションを担当（ボタンをクリックしたらウィンドウを表示）。

2.3 DOM（ドキュメントオブジェクトモデル）—— 基本概念

ブラウザがHTMLを読み込む際、メモリ内にページを一つの「ツリー（木）」として構築します。これを DOM と呼びます。HTML内の各タグ（見出しや段落など）は、このツリー上の「ノード」となります。これにより、ブラウザはページの内容を効率的に管理できます。

現時点では、「HTMLはこのツリーを作るための原材料である」と理解しておけば十分です。

3. HTMLのコアコンポーネントを理解する

コードを書き始める前に、HTMLの2つの核心的な概念である「要素」と「属性」を理解しておく必要があります。

3.1 要素 (Elements)：ウェブページの積み木

要素はコンテンツをマークアップし、それに意味を与えるために使用されます。
概念的には、一つの要素は通常 開始タグ + コンテンツ + 終了タグ で構成されます。

• 役割： ウェブページ上の異なるタイプのコンテンツを定義します。
• 例（概念的）：
• メイン見出し要素： ブラウザに「これはページで最も重要な見出しである」と伝えます。
• 段落要素： ブラウザに「これは一塊の文章である」と伝えます。
• 画像要素： ブラウザに「ここに画像を配置する」と伝えます。

要素は、異なる種類の容器やラベルステッカーのようなものだと考えてください。

3.2 属性 (Attributes)：追加情報の提供

属性は要素の中に記述される補足情報であり、より詳細なデータを提供するために使用されます。

• 役割： 要素をより具体的にし、必要な情報を提供します。
• 例（概念的）：
• 画像要素の場合： ブラウザに「画像のソース（ファイルパス）はどこか」を伝える属性が必要です。
• リンク要素の場合： 「クリックした後のジャンプ先URL」を指定する属性が必要です。
• 段落要素の場合： その特定の文章に固有の名前を付けるために「ID属性」を与えることがあります。

要素が「ドア」だとしたら、属性はそのドアが「木製である」とか「赤色である」といった詳細を教えてくれる情報です。

4. HTML発展史一覧