HTMLってなに？ページのほね組みを作ろう

たける 前回、ページは「3つのことば」でできてるって聞きました。まずはどれからですか？

りこ まずは HTML。ページの「ほね組み」をつくることば。家でいうと、柱や壁にあたる部分だよ。

HTMLは「ほね組み」

HTML（エイチ・ティー・エム・エル）は、ページのほね組みを作ることばです。「ここに見出し」「ここに文章」「ここに画像」と、なにを置くかを決めます。

家でいうと、柱や壁。まだ色もかざりもついていない、土台の部分です。

タグでかこむのがルール

HTMLでは、タグというしるしで中身をはさみます。形はいつもこうです。

<タグ>なかみ</タグ>

• <タグ> … はじまりのしるし（開くタグ）
• </タグ> … おわりのしるし（閉じるタグ。スラッシュ / がつく）

「ここから見出しだよ」「ここで見出しおわり」と、はさんで教えてあげるイメージです。

4つの基本のタグ

まずはこの4つを覚えれば、かんたんなページが作れます。

実さいに書くと、こうなります。

<h1>ぼくのページ</h1>
<p>はじめまして！サッカーが好きです。</p>
<img src="dog.png" alt="うちの犬">
<a href="https://example.com">すきなサイト</a>

これをブラウザで開くと、こう表示されます。

• <h1> の文字は大きく表示される
• <p> の文章はふつうの大きさ
• <img> は画像（ここでは犬の絵）
• <a> は青い文字で、クリックできるリンクになる

たける タグではさむだけで、ちゃんと見出しっぽく大きくなるんですね！

りこ そう。ブラウザが「h1は見出しだな」と分かって、大きく表示してくれる。でも、まだ色や形はさみしいよね。それは次回のCSSでつける。

ちょっとくわしく：<img> と <a>

<img> と <a> には、なまえ="ねうち" の形でおまけの情報をつけます。

<img src="dog.png" alt="うちの犬">

• src … どの画像を出すか（画像のファイル名）
• alt … 画像が出ないときに代わりに見せる文字

<a href="https://example.com">すきなサイト</a>

• href … クリックしたらどこへ行くか（行き先のURL）

この なまえ="ねうち" の形は、あとでReactを学ぶときにも何度も出てきます。今は「おまけの情報をつける書き方」とだけ覚えておけばOKです。

やってみよう

おうちのパソコンで、メモ帳（テキストエディタ）に上のHTMLを書いて、ファイルの名前を index.html にして保存し、それをブラウザにドラッグすると表示できます。

むずかしければ、だいじょうぶ。第6回でブラウザだけで試せる方法（StackBlitz） を紹介します。今は「タグではさむ」という形がわかればOKです。

まとめ

• HTMLはページのほね組みを作ることば（家でいう柱や壁）
• <タグ>なかみ</タグ> の形で、なにを置くかを決める
• 基本は4つ：<h1>見出し・<p>文章・<img>画像・<a>リンク
• src や href のように「おまけの情報」をつけられる

次の第3回では、このさみしい見た目に色やかざりをつける CSS を学びます。同じページがぐっと変わりますよ。

確認してみる

dog.pngは自分で用意する画像。index.htmlと同じフォルダに置き、ファイル名が違う場合にaltの説明が役立つか確認する。imgは閉じタグを持たないHTML要素。

仕様・手順の参照先