タグで「これは何か」を伝える

HTML は、文章に「これは見出し」「これは段落」という印を付けて書きます。この印をタグと呼びます。

<h3> は「3 番目の大きさの見出し」という意味です。開始タグから終了タグまでのひとまとまりを要素と呼びます。

最小の HTML ファイル

HTML ファイルは、だいたいこの形をしています。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>はじめてのページ</title>
  </head>
  <body>
    <h1>iCAR</h1>
    <p>インターネットと自動車をつなげる研究をしています。</p>
  </body>
</html>

• <head> の中: ページについての情報（タイトル、文字コードなど）。画面には出ない
• <body> の中: 画面に表示される中身

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

<title> の文字は、画面ではなくブラウザのタブに表示されます。

よく使うタグ

属性: タグに情報を足す

タグには、属性で追加の情報を書けます。名前="値" の形で、開始タグの中に書きます。

<a href="https://icar.sfc.wide.ad.jp/">iCAR のサイト</a>
<img src="img/jun.jpg" alt="村井純の写真" />
<div class="member-item">...</div>

• href: リンク先の URL
• src: 画像ファイルの場所。alt は画像が見えない人のための説明
• class: 要素に付ける名前。次のレッスンで CSS から指定するときに使う

<img> には中身がないので、終了タグがありません。

入れ子: タグの中にタグ

タグの中に、さらにタグを入れられます。今の研究室サイトのメンバー欄は、こう書かれています。

<section id="member">
  <div class="member-item">
    <img src="img/jun.jpg" />
    <h4>教授</h4>
    <h3>村井純</h3>
    <p class="text-muted">Jun Murai</p>
  </div>
  <div class="member-item">
    ...
  </div>
</section>

箱の中に箱が入っている、と考えると分かりやすいです。

字下げ（インデント）は、どの箱の中にいるかを人間が読みやすくするためのものです。ブラウザは字下げを気にしませんが、ずれていると読み間違えの元になります。

やってみよう: 自分のページを作る

1. 1 章で作った git-renshu フォルダに、hello.html というファイルを作ります。Claude Code に「hello.html を作って。中身は空でいい」と頼んでもかまいません。

2. 上の「最小の HTML ファイル」を写し、<body> の中を自己紹介に書き換えます。見出し、段落、箇条書き（好きなもの 3 つ）、リンクを 1 つずつ入れてください。

3. Finder で hello.html をダブルクリックして、ブラウザで開きます。

4. 終了タグを 1 つ消して、再読み込みしてみてください。表示がどう崩れるかを見たら、元に戻します。

5. 出来たら commit します。

確認テスト

<h3>村井純<h3>

チェックリスト

• hello.html を作ってブラウザで開けた
• 見出し、段落、箇条書き、リンクを使えた
• 今のサイトのメンバー欄の HTML を読んで、どこが名前か分かった