HTML ってなに？

「HTML」「タグ」「ソースコード」… Webサイトの裏側を覗いたことがある人なら、必ず目にする言葉。

普段ブラウザで見ているサイト。その「中身」がどうやって作られているか、考えたことありますか？今回はWebサイトの土台、HTML を、人の体の「骨」 にたとえて見ていきます。

ざっくり言うと、HTML は Webページの「骨組み」をつくる言葉 です。

HTML＝Webページの骨組み — **図2：**HTML＝Webページの「骨」

略は「HyperText Markup Language」。覚えなくてOK、意味だけ押さえれば十分：

HyperText ＝クリックで他のページに飛べる文章
Markup ＝印（マーク）をつける
Language ＝言葉

つまり「見出し・リンク・本文みたいな印をつける書き方」。書き方のルールも、そのルールで書かれた中身も、まとめて「HTML」と呼びます。

人の体に例えると、HTMLは骨格にあたります。骨があるから立てる。骨があるから形が決まる。HTMLがあるからWebページは形になる、というわけです。

タグで「印」をつける

HTMLは、文章にタグという印をつけて、「これは見出し」「これは段落」と意味を持たせる仕組みです。

例えば「こんにちは」というただの文字列が…

<h1>こんにちは</h1> → 「これは見出しだよ」
<p>こんにちは</p> → 「これは段落だよ」

と、タグで包むことで意味が変わります。本の目次で「タイトル」「章」「節」「本文」と項目が分かれてるのと同じ感覚です。

なんで HTML が必要？

HTMLがないと、文字の塊しか表示できません。

HTML なし vs あり — **図4：**HTMLなし＝ただの文字列／あり＝構造のあるページ

メモ帳に「タイトル見出し本文リンク」とベタ打ちしただけだと、どこが見出しでどこが本文か、ブラウザは区別できません。 HTMLでタグをつけてあげることで、ブラウザは「ここは見出しだから大きく表示」「ここはリンクだから青く下線」と理解できる。

ブラウザの記事で触れた「ブラウザ＝案内人＋翻訳者」の 翻訳者の部分。翻訳元になるのが、このHTMLです。

主なタグを知っておこう

たくさんあるけど、特に出番の多いタグはこのあたり：

<h1> <h2> <h3> … 見出し（h1が一番大きい）
<p> … 段落（パラグラフ）
<a href="..."> … リンク
<img src="..."> … 画像
<ul> <ol> <li> … リスト（箇条書き／番号付き）
<div> … ひとまとまりのブロック

最初は「タグの種類多すぎ」って感じますが、よく使うのは10種類くらい。テレビのリモコンと同じで、毎回押すボタンは限られてます。

マトリョーシカみたいな「入れ子」構造

HTMLには、ちょっとした特徴があります。タグの中に、別のタグが入っていること。

<html>                          <!-- ページ全体を囲む箱 -->
  <body>                        <!-- 画面に表示される中身 -->
    <h1>記事タイトル</h1>          <!-- 大きな見出し -->
    <p>こんにちは。本文です。</p>   <!-- 段落（本文）-->
  </body>
</html>

<html> の中に <body> があり、その中に <h1> や <p> がある。マトリョーシカみたいに、外側のタグが内側のタグを包んでいます。ブラウザはこれを上から順番に読みながら、画面に組み立てていきます。

CSS と JavaScript との関係

HTMLだけだと、骨だけ。それだけだと、白黒で味気ない見た目になります。

HTML + CSS + JavaScript — **図7：**HTML（骨）＋ CSS（服）＋ JavaScript（動き）

そこで登場するのが CSS（見た目を整える＝服）と JavaScript（動きをつける＝振る舞い）。3つセットで、いま見ているWebサイトが成り立っています。

HTML ＝骨 … 構造をつくる
CSS ＝服 … 見た目をつくる
JavaScript ＝動き … 振る舞いをつくる

CSS と JavaScript の話は別の記事で詳しく触れます。

まとめ

ふんわり理解チェック

HTML＝Webページの「骨組み」をつくる言葉
タグ（<h1>など）で文章に「これは何か」のラベルを貼る
入れ子構造でできていて、ブラウザがそれを読んで表示する
HTML（骨）＋CSS（服）＋JavaScript（動き）で1つのサイトになる

次は、骨にあたるHTMLに「色や形」を加える役割—— CSS の話。Webページが「見た目」を持つしくみに迫ります。

HTML ってなに？