HTML・はじめの一歩

タグって何?

HTMLの主役「タグ」。むずかしくありません。“はさむ”だけ。基本のかたちを、ここでしっかりつかもう。

タグは “ここは○○だよ” と教えてあげる目印でした。今回は、その目印のかたちをちゃんと知ります。ここさえ分かれば、HTMLの8割は読めるようになります。ほんとです。

開始タグと終了タグ

たとえば「これは段落だよ」と伝えたいとき、こう書きます。

<p>こんにちは。しまちゃんです。</p>

分解するとこうです。

部分意味
<p>開始タグ。「ここから段落が始まるよ」
こんにちは。はじめてのHTMLです。中身
</p>終了タグ。「段落はここまでだよ」(/ が付く)

パンで具(中身)をはさむイメージ。上のパンが開始タグ、下のパンが終了タグです。開始と終了で同じ名前を使うのがポイント。<p> で始めたら、閉じるのも </p> です。

タグは「種類」を表している

p はparagraph(段落)の頭文字。名前が変われば、意味も変わります。

<h1>しまちゃん</h1>
<p>おえかきがすきです。</p>

<h1> は見出し、<p> は段落。同じ “はさむ” かたちで、名前だけを変えて種類を伝える——これがHTMLのすべての基本です。名前を差し替えるだけ、と思えば、たくさんのタグも急にやさしく見えてきます。

タグの中に、タグを入れられる

タグは、中にべつのタグを入れることもできます。これを入れ子(ネスト)と呼びます。

<p>しまちゃんは <strong>おえかき</strong> がだいすきです。</p>

<strong> は「ここは強調だよ」の目印。段落 <p> の中に、強調 <strong> がすっぽり入っています。箱の中に小さな箱を入れるイメージ。この“入れ子”はHTMLのいたるところで出てきます。

このレッスンのまとめ

  1. タグは <名前></名前>中身をはさむ
  2. 終了タグには / が付く
  3. 名前で種類を伝えている(p は段落、h1 は見出し…)