- HTMLが「入れ子の箱（タグ）」でできていると分かる
h1・p・img・a・ulの役わりが分かる- 自己しょうかいのページを作れる
パソコンとブラウザ（Chrome など）をつかいます。15〜20分。
タグ＝中身をつつむ箱
いつも見ている Web ページは、じつは タグ という「箱」をたくさん組み合わせて作られています。見出しの箱、文の箱、画像の箱……それぞれ役わりがちがいます。
タグは 開きタグ <p> と 閉じタグ </p> で中身をはさみます。この「開き〜中身〜閉じ」のひとまとまりを 要素 といいます。閉じタグは / がつくのが目じるし。
<p>ここが中身</p>
↑ 開きタグ ↑ 閉じタグ
箱の中に、べつの箱を入れることもできます。これが 入れ子（いれこ）。だから HTML は「箱の中に箱」のかたまりなんだね。
よく使うタグ
まずはこの5つだけ覚えればOK。
<h1>見出し</h1> // 大きなタイトル
<p>ふつうの文</p> // だんらく（文）
<img src="neko.png"> // 画像（閉じタグなし）
<a href="https://…">リンク</a> // クリックでとぶ
<ul>
<li>1つめ</li> // ・つきのリスト
<li>2つめ</li>
</ul>
img や a についている src= や href= は、タグへの「おまけの指示」で 属性 といいます。「どの画像？」「どこへとぶ？」を教えてあげるんだね。
テキストエディタ（メモ帳や VS Code）で、自分の 自己しょうかいページ を作ってみよう。ファイル名は jiko.html。
h1で自分の名前を 見出し にするpで「すきなもの」など自分の 文 を書くimgで すきな画像 を1つ出す（srcに画像のばしょを書く）aで すきなサイト へのリンクを作る（hrefに URL）- 保存して、そのファイルを ブラウザで開いて 確かめる
- うまく出ないときは、タグの閉じわすれ（
</p>など）がないか探す
💡 こまったら AI に聞いてみよう：「画像（img）を出すには、どう書けばいい？」とたずねてみよう。出てきた書き方を自分のファイルにためして、ちゃんと画像が出るか確かめるのが大事。
- タグは何のためにある？（→ 中身をつつんで「これは何の箱か」を決める）
- 見出しのタグは？（→
h1） - リンクのタグは？（→
a）
つぎの回では、画面には出ないけど大事な head とメタ を学びます。このサイトの一覧カードが、じつはそれで作られている仕組みものぞいてみよう。