HTMLって何？

Webサイトを作ってみたい。でも「HTML」ってよく聞くけれど、正直なんのことかピンとこない……。だいじょうぶ。ここではむずかしい言葉を全部わきに置いて、HTMLがどんなものか、いちばん最初のイメージだけつかみます。書けるようになる必要は、まだありません。

HTMLは「家の骨組み」みたいなもの

家を建てるとき、いきなり壁紙や家具は選びませんよね。最初に「ここが部屋」「ここが玄関」という骨組みを作ります。Webページも同じ。「ここが見出し」「ここが本文」「ここが画像」——という構造を決めるのがHTMLの役目です。

言いかえると、HTMLは「これは何なのか」を書いていく作業。文章のかたまりを見て、「ここはタイトル」「ここは説明文」「ここはボタン」と、ひとつずつ役割の名札をつけていくイメージです。

じつは、いつも見ているもの

いま読んでいるこのページも、ニュースサイトも、通販サイトも、ほぼすべてがHTMLでできています。特別な世界の話ではなく、あなたが毎日ながめている画面の“裏側”にあるのがHTML。だから学べば、見える景色がちょっと変わります。

じっさいに、ちょっとだけ見てみよう

たとえば、こう書きます。読めなくてOK、「へぇ、こんな感じか」で十分です。

<h1>しまちゃん</h1>
<p>おえかきとラーメンがすきな、しまちゃんのページです。</p>

タグは <h1> で始まって </h1> で終わる、このサンドイッチが基本の形です。書いたHTMLは、ブラウザが読み取って、わたしたちが見ている画面に描いてくれます。

HTMLが「やらないこと」も知っておこう

なぜ骨組みと見た目を分けるの？と思うかもしれません。理由はシンプルで、分けておくと後がラクだから。中身はそのままに、着せ替えのように見た目だけを変えられます。この「役割分担」の考え方は、この先ずっと役に立ちます。

このレッスンのまとめ

このページで持ち帰ってほしいのは、たった3つ。

1. HTMLはWebページの骨組みを作る言葉
2. タグは「ここは○○だよ」という目印
3. 見た目はHTMLの仕事じゃない（それはCSS）

これだけで、もう「HTMLって何？」に自分の言葉で答えられます。