タグって何？

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

開始タグと終了タグ

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

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

分解するとこうです。

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

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

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

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

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

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

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

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

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

入れ子は“交差”させない

入れ子でひとつだけ守ってほしいのが、あとに開けたタグを、先に閉じること。箱の中の小さな箱を先に閉じてから、外の箱を閉じます。

<!-- ○ よい例：strongがpの中にすっぽり -->
<p>しまちゃんは<strong>おえかき</strong>がすき。</p>

<!-- × わるい例：閉じる順番が交差している -->
<p>しまちゃんは<strong>おえかきがすき。</p></strong>

わるい例は、外の箱（<p>）を閉じたあとに中の箱（</strong>）を閉じていて、箱がねじれた状態です。「中の箱から先に閉じる」——マトリョーシカと同じ順番、と覚えておきましょう。

このレッスンのまとめ

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